/* Class as selector */ | |
H1.pastoral { | |
color: #00FF00 | |
} | |
/* ID as selector */ | |
#z98y { | |
letter-spacing: 0.3em | |
} | |
H1#z98y { | |
letter-spacing: 0.5em | |
} | |
/* Contextual selectors */ | |
DIV P { | |
font: small sans-serif | |
} | |
.reddish H1 { | |
color: red | |
} | |
#x78y CODE { | |
background: blue | |
} | |
DIV.sidenote H1 { | |
font-size: large | |
} | |
/* Anchor pseudo-classes */ | |
A:link { | |
color: red | |
} /* unvisited link */ | |
A:visited { | |
color: blue | |
} /* visited links */ | |
A:active { | |
color: lime | |
} /* active links */ /* Pseudo-class combined with normal class */ | |
A.external:visited { | |
color: blue | |
} | |
/* 'first-line' pseudo-element */ | |
P:first-line { | |
font-variant: small-caps | |
} | |
/* 'first-letter' pseudo-element */ | |
P:first-letter { | |
font-size: 200%; | |
float: left | |
} | |
/* Pseudo-elements in selectors */ | |
BODY P:first-letter { | |
color: purple | |
} | |
P.initial:first-letter { | |
color: red | |
} | |
/* Multiple pseudo-elements */ | |
P { | |
color: red; | |
font-size: 12pt | |
} | |
P:first-letter { | |
color: green; | |
font-size: 200% | |
} | |
P:first-line { | |
color: blue | |
} |