Pseudo-classes (one colon) style an element in a particular state.
a:link { color: blue; } /* unvisited link */
a:visited { color: purple; } /* visited link */
a:hover { color: red; text-decoration: underline; } /* mouse over */
a:active { color: orange; } /* while being clicked */
input:focus { outline: 2px solid dodgerblue; } /* keyboard/typing focus */
input:disabled { background: #eee; }
input:checked + label { font-weight: bold; }
input:valid { border-color: green; }
input:invalid { border-color: red; }
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f2f2f2; } /* zebra stripes */
li:nth-child(3n) { color: gray; }
p:not(.note) { color: #333; }An unvisited link · hover or click this link
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
A paragraph with class note.
A normal paragraph.
Remember the order for links: LoVe HAte (link, visited, hover, active).
Pseudo-elements (two colons) style a part of an element or insert generated content.
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; color: crimson; } /* drop-cap */
::selection { background: yellow; } /* highlighted text */
input::placeholder { color: #999; }
.required::after { content: ' *'; color: red; } /* adds text after */
.quote::before { content: '\201C'; } /* opening quote mark */This is a long paragraph so that you can see the first-line and first-letter styles. Select some of this text with the mouse to see the ::selection colours. It keeps going so that it wraps onto a second line on most screens.
Simplicity is the soul of efficiency.
::before and ::after need a content property (can be an empty string) to appear.
Try it: Create a navigation menu from a <ul>. Remove bullets with list-style: none, show links side by side with display: inline-block, add padding, and change the background on a:hover. Add zebra stripes to a table using tr:nth-child(even).