CSS: selectors: by descendant

Tutoring web design, so many fun tricks can present themselves. The tutor brings up one from his reading.

In a CSS stylesheet, you have tremendous fine-tuning potential based on contextual selection. Suppose you want, for instance, to render all list entries in ordered lists red, but in unordered lists, blue. The following code

ol li{color:red}

ul li{color:blue}

does just that. It differentiates the li elements based on their parentage (ol vs ul).

HTH:)

Source:

Meyer, Eric A. CSS Pocket Reference. Sebastopol: O’Reilly Media, Inc., 2004.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Leave a Reply