| /* 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 } |