HTML and CSS Reference
The reason only the elements after the blockquote are affected
is that the browser receives the web page as a stream, one
character at a time, and applies styles as it goes along. It
tries to avoid going back and restyling alreadY — rendered
elements, because doing so impacts performance.
You've just learned about CSS3's new combinators, but CSS3 also provides
several pseudO — classes for targeting elements according to their relative
position in the DOM. PseudO — classes act as modifiers to simple selectors—
so instead of selecting all the paragraphs, you can select just the first
one, or just the last one, or every third one. In the next section, you'll
learn how to use CSS3 pseudO — classes to solve common design problems.
Selecting among a set of elements with pseudo-classes
Combinators allow you to select all elements that fit a particular rela-
tionship. But what if you don't want to select all of the <p> elements
that are descendants of an <article> element for the same styling? Or
all the rows of a table? CSS pseudo-classes allow you to select the first
element, the last element, or a subset of the elements according to a
pattern. They remove the need to add classes to your markup for
purely stylistic purposes. Before you learn about pseudo-classes, let's
consider what you would need to do if pseudo-classes didn't exist, and
why that's not good practice, with a couple of examples.
The IE6 problem
IE6 is the most successful browser of all time in terms of market share, manag-
ing as much as 90% market share in its heyday. Unfortunately, it's missing sev-
eral key features of CSS2.1.
The ubiquity of IE6 allowed many organizations to get away with shortcuts in
web app development. The result is that they have since been stuck with expen-
sive-to-replace applications that only work on IE6. It's impossible to upgrade the
web browser without first replacing all those applications—a slow process. The
end result is that several CSS2.1 features couldn't be used on most websites un-
til recently, one of which is pseudo-classes.
In the old days (you know, around 2005) when IE6 was predominant, the only
way to do this consistently was to add classes all over your HTML that anticipated
the styling you wanted. With CSS2.1 and CSS3 approaching 90% browser sup-
port, you should now be doing this with pseudo-classes.