CSS Selector Cheat Sheet

*, *::before, *::after {
  box-sizing: border-box;
}

Every element, with no specificity at all. Pseudo-elements are not elements, which is why resets list ::before and ::after separately.

p {
  max-width: 65ch;
}

Elements by tag name. Case does not matter for HTML tags, so P and p are the same.

.card {
  padding: 1.5rem;
}

Any element whose class attribute lists card as one of its space-separated words. Class names are case-sensitive: .Card will not match class="card".

#pricing {
  scroll-margin-top: 5rem;
}

The element with id="pricing". One ID outweighs any number of classes, so ID rules are hard to override later. Many teams keep IDs for anchors and scripts.

button.primary {
  background: #0369a1;
}

No space between the parts: one element has to match all of them. If there is a type selector, it goes first, so write button.primary, not .primarybutton.

h1, h2, h3 {
  line-height: 1.2;
}

A comma separates alternatives that share the declarations, and each keeps its own specificity. If one entry is invalid, the browser drops the whole rule; inside :is() it is ignored instead.

button[disabled] {
  cursor: not-allowed;
}

The attribute is present, whatever its value, even an empty one.

input[type="email"] {
  min-width: 18rem;
}

The whole value must match. Quotes are optional for a plain word, but values with spaces, dots or a leading digit need them.

[data-tags~="sale"] .price {
  color: #b91c1c;
}

The value is a space-separated list that contains this exact word, the way a class selector reads the class attribute. data-tags="new sale" matches; "wholesale" does not.

[lang|="en"] q {
  quotes: "“" "”";
}

Exactly en, or en followed by a hyphen (en-GB, en-US). It was built for language codes, but :lang(en) does the job better because it also sees inherited lang.

a[href^="mailto:"]::before {
  content: "✉ ";
}

The value begins with the string. Good for link types: mailto:, tel:, or https:// for external links.

a[href$=".pdf"]::after {
  content: " (PDF)";
}

The value ends with the string. A link like report.pdf?v=2 will not match, because the query string comes last.

[class*="col-"] {
  min-width: 0;
}

The string appears anywhere in the value, so this also matches class="no-col-gap". When you control the markup, a dedicated class is more precise.

a[href$=".pdf" i]::after {
  content: " (PDF)";
}

The i flag compares the value case-insensitively, so .PDF and .Pdf match too. Every current browser supports i. The opposite flag, s, has very little support.

.card p {
  margin-block: 0.5em;
}

A p anywhere inside .card, at any depth, including inside a nested card.

.menu > li {
  display: inline-block;
}

Direct children only. List items in a submenu inside .menu are skipped.

h2 + p {
  margin-top: 0;
}

The p directly after an h2, with the same parent. Text between them does not count, but any element in between breaks the match.

h2 ~ p {
  color: #475569;
}

Every p after the h2 under the same parent, with anything in between. Like all combinators except :has(), it only looks forward, never back.

@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
  }
}

A pointer is over the element or one of its descendants. On touch screens it fires on tap and can stick, so wrap hover-only effects in @media (hover: hover) and never hide anything essential behind them.

.button:active {
  transform: translateY(1px);
}

While the element is being pressed. :link, :visited, :hover and :active all count as one pseudo-class, so for links put them in that order (LVHA) or a later one will override an earlier one.

input:focus {
  border-color: #0284c7;
}

The element has focus by any route: keyboard, mouse or script.

.button:focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 2px;
}

Focus that the browser judges should be shown: keyboard focus, and text fields however they were focused. Use it for focus rings instead of removing outline on :focus.

.field:focus-within {
  box-shadow: 0 0 0 3px #bae6fd;
}

The element has focus or contains the focused element. It highlights a whole field group while someone types in its input.

a:link {
  color: #0369a1;
}

An a or area element with an href that has not been visited. A plain <a> with no href matches neither :link nor :visited.

a:visited {
  color: #6d28d9;
}

Links in the browsing history. To protect privacy, browsers only apply colour properties here, and scripts reading the computed style see the unvisited colours.

:any-link {
  text-underline-offset: 0.2em;
}

Every a or area with an href, visited or not. It is shorter than :link, :visited, and counts as one pseudo-class.

section:target {
  background: #fef9c3;
}

The element whose id matches the #fragment in the address bar, for example #pricing. It changes when someone follows an in-page link.

input:checked + label {
  font-weight: 600;
}

Ticked checkboxes, the selected radio button and selected <option>s. The + label pattern only works when the label comes right after the input.

button:disabled {
  opacity: 0.6;
}

Controls with the disabled attribute, including controls inside a disabled <fieldset>. aria-disabled="true" does not count, so target that attribute separately.

label:has(+ :required)::after {
  content: " *";
}

Inputs, selects and textareas with the required attribute. :optional matches the rest.

form:invalid button[type="submit"] {
  opacity: 0.6;
}

The value breaks a constraint: required, type, pattern, min, max or length. An empty required field is :invalid from the moment the page loads, so error styles here show before anyone types.

input:user-invalid {
  border-color: #dc2626;
}

Like :invalid, but only once the person has changed the field and moved on, or tried to submit. It is the one to use for red error borders.

input:not(:placeholder-shown) + label {
  transform: translateY(-1.2em) scale(0.85);
}

The field is empty and showing its placeholder, which is the trick behind floating labels. The input needs a placeholder attribute; a single space is enough.

input[type="checkbox"]:indeterminate {
  accent-color: #94a3b8;
}

A checkbox set to indeterminate by script (the "some selected" state), a radio group with nothing chosen, or a <progress> without a value.

:root {
  --brand: #0369a1;
}

The top element, which is <html> in a web page. It has class-level specificity (0, 1, 0), whereas html has (0, 0, 1). That is one reason custom properties live here.

li:first-child {
  border-top: 0;
}

An li that is the first element among its siblings. If another element comes first, no li matches. That case calls for :first-of-type.

li:last-child {
  margin-bottom: 0;
}

The last element among its siblings. Text and comments do not count, only elements.

.tag:only-child {
  margin: 0;
}

The element has no element siblings.

tr:nth-child(even) {
  background: #f8fafc;
}

An+B counts from 1: 2n+1 or odd gives 1, 3, 5; 3n gives 3, 6, 9; -n+3 gives the first three. It counts every element sibling, whatever its type.

tr:nth-child(even of :not([hidden])) {
  background: #f8fafc;
}

Counts only the siblings that match the selector after of, so zebra stripes stay even when rows are filtered out. The selector after of adds to the specificity.

li:nth-last-child(-n+3) {
  font-weight: 600;
}

The same formula counted from the last sibling. -n+3 picks the last three.

article p:first-of-type {
  font-size: 1.125rem;
}

The first p among its siblings, even if an h2 or img comes before it. Note that "type" means tag name; .intro:first-of-type does not mean the first .intro.

.gallery img:nth-of-type(3n) {
  margin-right: 0;
}

Counts only siblings with the same tag name. :last-of-type, :nth-last-of-type() and :only-of-type work the same way.

.alert:empty {
  display: none;
}

No children at all, including text. A single space or line break counts as content, so <div> </div> is not :empty. Comments are ignored.

.tab:not(.active) {
  opacity: 0.7;
}

Elements that do not match. It accepts a list, as in :not(.a, .b), and takes the specificity of its most specific argument, so :not(#x) adds an ID.

:is(h1, h2, h3) a {
  text-decoration: none;
}

Matches if any argument matches, which saves writing out every combination. An invalid argument is skipped instead of breaking the rule. Its specificity is that of the most specific argument.

:where(ul, ol)[class] {
  list-style: none;
  padding: 0;
}

Works like :is() but adds zero specificity, whatever is inside. Use it for defaults and resets that any later rule should be able to override.

.card:has(> img) {
  padding-top: 0;
}

An element containing a match: here, a card with an img as a direct child. h2:has(+ p) checks the next sibling instead. Supported in Chrome 105, Safari 15.4 and Firefox 121 and later.

:lang(de) {
  hyphens: auto;
}

Matches by language, including lang inherited from an ancestor and longer codes such as de-AT. [lang="de"] only checks the element’s own attribute.

.icon-arrow:dir(rtl) {
  transform: scaleX(-1);
}

Matches by text direction, whether inherited or detected by dir="auto". [dir="rtl"] only sees the attribute itself.

my-widget:not(:defined) {
  visibility: hidden;
}

Built-in elements, plus custom elements once their definition has loaded. :not(:defined) hides a web component until its script runs.

[popover]:popover-open {
  opacity: 1;
}

An element with the popover attribute while it is showing.

dialog:modal {
  max-width: 32rem;
}

A dialog opened with showModal() rather than show(), or an element in fullscreen. While a modal dialog is open, the rest of the page is inert.

.badge::before {
  content: "";
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}

A generated first child. It only appears with a content property, even an empty one, and not on img or most inputs, which have no inside.

.external::after {
  content: " ↗" / "";
}

A generated last child. The text after the slash is the alternative text for screen readers, and an empty string keeps decorative symbols out of the spoken name.

.lead::first-line {
  font-variant: small-caps;
}

The first rendered line of a block, wherever it wraps at the current width. Only font, colour, background and text properties apply.

.story > p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 1;
}

The first letter of a block, together with any punctuation before it. This is the usual way to make a drop cap.

input::placeholder {
  color: #64748b;
}

The placeholder text in an empty field. Pale placeholder text often fails contrast checks, and it disappears as soon as someone types, so it should never be the only label.

::selection {
  background: #fde68a;
  color: #0f172a;
}

Text the person has highlighted. Only a few properties apply, mainly color, background-color, text-decoration and text-shadow.

li::marker {
  color: #0369a1;
  content: "→ ";
}

The bullet or number of a list item, or the triangle of a <summary>. It takes colour, font properties, content and a few others; layout properties are ignored.

input[type="file"]::file-selector-button {
  border-radius: 0.5rem;
}

The "Choose file" button inside <input type="file">.

dialog::backdrop {
  background: rgb(15 23 42 / 0.6);
}

The layer behind a modal dialog, a popover or a fullscreen element, covering the rest of the page.

my-button::part(label) {
  font-weight: 600;
}

An element inside a web component’s shadow root that the component exposes with part="label". Other elements inside the shadow root cannot be selected from outside.

/* inside the component’s shadow root */
::slotted(img) {
  max-width: 100%;
}

Used in a shadow root’s stylesheet. It styles elements from the page that are placed in a <slot>, but only the top-level ones, not their descendants.

.card {
  &:hover { border-color: #0369a1; }
  & + & { margin-top: 1rem; }
  .dark & { background: #0f172a; }
}

In nested CSS, & stands for the parent rule’s selector. It counts like :is(parent), so if the parent is #a, .b, every match gets ID specificity.

/* inside the shadow root */
:host {
  display: block;
}
:host(.compact) {
  padding: 0.25rem;
}

Inside a shadow root, the custom element itself. :host(.compact) matches when the element has that class on the page.

@scope (.card) {
  :scope { border: 1px solid #cbd5e1; }
  img { border-radius: 0.5rem; }
}

The root of an @scope block. In JavaScript, el.querySelectorAll(":scope > li") means the direct children of el. In a plain stylesheet it means the same as :root.