SELECTORS - CSS: Professional Techniques for Modern Layout - page 38

PSEUDO WHAT?
h ere are two types of pseudo-thingies in CSS: pseudo-classes and pseudo-elements. h e
CSS2.1 pseudo-classes are:

:link : An unvisited link
:visited : A visited link
:hover : A hovered element
:focus : A focused element
:active : An active element (such as a link while it's being clicked)
:first-child : An element that is the i rst child of another element
:lang() : An element based on the value of its lang attribute

h e CSS2.1 pseudo-elements are:

::first-line
::first-letter
::before
::after

So what's the dif erence? It comes down to the way the pseudo-things af ect the document.
Pseudo-classes act kind of like they add classes to the document. Pseudo-elements have ef ects
as though they caused elements to be inserted into the document.

40

Ta k e ::first-letter as an example. Suppose you want to make the i rst letter of every h1
twice as big as the rest (see Figure 2-1). Easy:

h1::first-letter { font-size : 250% ;}

h is happens as though the CSS and markup were changed to be:

h1 first-letter { font-size : 250% ;}

< h1> < first-letter>H< / first-letter>owdy , y'all!< / h1>

Is that what really happens inside the guts of the browser? Who knows? All you know is that it
works as if that's what happened. h us the name “pseudo-element.”

Similarly, pseudo-classes work as if they cause classes to be attached to elements within the
document. For example, imagine that a browser attached a class of “i rst-child” to every
element that was the i rst child of another element. You could then style any of them by saying
things like:

li.first-child { border-left : none ;}