CSS Pseudo-Classes and Pseudo-Elements: The Complete Guide

a:hover { color: blue; }        /* Mouse over */
a:active { color: red; }        /* Being clicked */
input:focus { outline: 2px solid blue; }  /* Has focus */
input:focus-visible { outline: 2px solid blue; }  /* Keyboard focus only */
input:disabled { opacity: 0.5; } /* Disabled state */
input:checked { accent-color: green; }  /* Checked checkbox/radio */

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }   /* Zebra striping */
li:nth-child(3n) { color: red; }              /* Every 3rd item */
p:first-of-type { font-size: 1.2em; }        /* First p, ignoring other elements */
div:empty { display: none; }                  /* No children */

/* All links except the active class */
a:not(.active) { color: gray; }

/* Elements that match any of the selectors */
:is(h1, h2, h3) { font-family: serif; }

/* Like :is but with zero specificity */
:where(h1, h2, h3) { margin-bottom: 1rem; }

/* Has a descendant that matches (game-changer!) */
div:has(> img) { padding: 0; }  /* div that directly contains an img */
form:has(:invalid) { border: 2px solid red; }  /* form with invalid inputs */

/* Add content before/after an element */
.required::before {
  content: "* ";
  color: red;
}

blockquote::before {
  content: open-quote;
  font-size: 2em;
}

/* Style the placeholder text */
input::placeholder {
  color: #999;
  font-style: italic;
}

/* Style text selection */
::selection {
  background: #ffcc00;
  color: black;
}

/* Style the first line or letter */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; float: left; }

/* Hide native checkbox, style with pseudo-elements */
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  text-align: center;
  color: white;
}

input[type="checkbox"]:checked {
  background: blue;
  border-color: blue;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: black;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}