As I’ve mentioned before, CSS is powerful because it uses the structure of HTML documents to determine appropriate styles and how to apply them. That’s only part of the story since it implies that such determinations are the only way CSS uses document structure. Structure plays a much larger role in the way styles are applied to a document. Let’s take a moment to discuss structure before moving on to more powerful forms of selection.
In order to understand the relationship between selectors and documents, you need to once again examine how documents are structured. Consider this very simple HTML document:
<html> <head> <base href="http://www.meerkat.web/"> <title>Meerkat Central</title> </head> <body> <h1>Meerkat <em>Central</em></h1> <p> Welcome to Meerkat <em>Central</em>, the <strong>best meerkat web site on <a href="inet.html">the <em>entire</em> Internet</a></strong>!</p> <ul> <li>We offer: <ul> <li><strong>Detailed information</strong> on how to adopt a meerkat</li> <li>Tips for living with a meerkat</li> <li><em>Fun</em> things to do with a meerkat, including: <ol> <li>Playing fetch</li> <li>Digging for food</li> <li>Hide and seek</li> </ol> </li> </ul> </li> <li>...and so much more!</li> </ul> <p> Questions? <a href="mailto:email@example.com">Contact us!</a> </p> </body> </html>
Much of the power of CSS is based on the parent-child relationship of elements. HTML documents (actually, most structured documents ...