Graphics Programs Reference
In-Depth Information
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:
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.
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 ;}
Search WWH ::

Custom Search