HTML and CSS Reference
In-Depth Information
If your head hurts after reading even small portions of W3C recommendations, you're not
alone. Let's make things easier by looking at some basic examples.
Simple Selectors
The following is easy enough, and probably familiar territory for you, but as you will see later
on, even simple selectors can become complex under the right circumstances:
body {...} matches <body>...</body> .
h2.first {...} matches <h2 class="first">...</h2> .
div#logo {...} matches <div id="logo">...</div> .
a:visited {...} matches <a href="link.html">link</a> in its visited state.
The members of the W3C aren't prone to underachievement, so they follow the descrip-
tion of simple selectors with information about the creatively named “selectors” (many
developers prefer combined or contextual):
A selector is a chain of one or more simple selectors separated by combinators. Combi-
nators are: whitespace, ">", and "+". Whitespace may appear between a combinator and
the simple selectors around it.
Once again, examples make the heart grow fonder.
Combined Selectors
As you can see, various combinations of simple or combined selectors and combinators target
specific elements within your (X)HTML document:
body p {...} matches <body> <p>text</p> </body> .
h2.first > span {...} matches <h2 class="first"> <span>text</span> </h2> .
div#logo + h3 {...} matches <div id="logo"></div> <h3>text</h3> .
div > ul + p em {...} matches <div><ul></ul><p> <em>text</em> </p></div> .
Note Whitespace surrounding the childand adjacent siblingcombinators ( > and + ) is optional, but keep
in mind that removing the whitespace may make your selectors more difficult to read. The benefits of clarity
can outweigh the minor optimization gained by removing the whitespace.
Now let's take a quick look at the specific types of selectors available (attribute and
pseudo-class selectors are covered in detail in Chapter 2). If you are used to coding by hand
using a text editor, and you know your selectors after reading Chapter 2, you can skip this part
and head straight to the section titled “The Cascade: Calculating Specificity,” later in this
chapter. However, those of you who have been relying on visual development tools (such as
Search WWH ::

Custom Search