HTML and CSS Reference
In-Depth Information
Using combinators, you can chain together the individual selectors
discussed earlier to create more complex selectors that can be used to
describe elements not just in the entire document but in specific parts of
the document or that match specific markup patterns. The following are
all examples of chaining simple selectors:
nav ul li:first-child {}
.vevent h2+* {}
ul ul ul ul>li {}
#page .hentry a.entry-title:link {}
div#main form#registration fieldset
➥
input[type=”text”]:invalid {}
Translating Selectors into Plain English
If it hasn't yet become clear, selectors can be read from left to right
and described as traveling toward the top of the document tree.
The selector header
ul>li
selects “any list item elements that are
children of unordered list elements that are contained in a header
element.”
If you are ever unsure of what a selector does, the online tool
SelectOracle (
http://gallery.theopalgroup.com/selectoracle/
)
trans-
lates CSS2 and CSS3 selectors into English (or Spanish) for you.
