CSS basics - HTML5 and CSS3 - page 478

up of only type selectors. But within each group the number of selec-
tors for each type is the significant factor.
Pseudo-classes
One of the original uses for JavaScript when it was introduced by
Netscape back in 1995 was for rollover effects : changing a background
image when the mouse pointer enters or leaves an element. Rather than
require an entire scripting language for a simple visual effect like this,
the ability to select elements based on user activity has been built into
CSS with pseudo-classes.
This example is a page with a para-
graph element:
<p>Hover me</p>
By default, the paragraph is black
text on a white background.
The notation for a pseudo-class is a
colon followed by a keyword. For
rollover effects, the keyword is hover :
p:hover { background-color: #000; }
This rule sets the background of the
element to black when the mouse
pointer hovers over the element.
It's also possible to use pseudo — classes with combinators,
defining rules for children of an element depending on its
dynamic state. Several interesting effects are possible only
when you do this. Let's look at a simple example.