Archive — hermiene.net

I learned about contextual selectors in CSS today. You can apply a specific style to any nested element in the HTML. Notice the different images for different levels of nesting in my unsorted list items? Instead of cluttering my HTML with classes (like I used to do), I ask CSS to apply a style to <li>s which is nested inside an <ul> for a "level 1" list item. Similarly for "level 2" items; I ask it to look for <li>s nested inside two <ul>s. Code:

ul li { /* The level 3 list item image. */
  list-style-image: url(pics/li/lev1.png);
}

ul ul li { /* The level 2 list item image. */
  list-style-image: url(pics/li/lev2.png);
}

ul ul ul li { /* The level 3 list item image. */
  list-style-image: url(pics/li/lev3.png);
}

CSS should be cherished and loved by everyone.