Pseudo-Classes

Code

/* Interactive states */
a:hover { text-decoration: underline; }
input:focus { border-color: #1976d2; }
button:active { transform: scale(0.97); }

/* Structural selectors */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }
li:nth-child(3n+1) { color: red; }

/* Negation and matching */
input:not([type="submit"]) { width: 100%; }
a[href^="https"] { color: green; }

/* Form state */
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
input:placeholder-shown { border-color: #ccc; }

/* Empty element */
.box:empty::before { content: "No content"; }

Explanation

Pseudo-classes select elements based on state or position without extra markup. :hover, :focus, and :checked react to interaction, while nth-child patterns target structural positions. :not() excludes matches, enabling precise selectors that keep markup clean.

More CSS3 Snippets