CSS 3 cheatsheet

CSS 3: Selectors and the box model

8 common CSS 3 tasks.

Include padding in element widths

Make width mean the full box. A common global reset.

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

Select by element, class, id, child, descendant and attribute.

p { }
.card { }
#header { }
ul > li { }
nav a { }
input[type="email"] { }

Style hover, keyboard focus and the first and last items.

a:hover { }
button:focus-visible { outline: 2px solid; }
li:first-child { }
li:nth-child(odd) { }

Insert content before an element with no extra HTML.

.note::before {
  content: "Note: ";
  font-weight: bold;
}

Style a card that contains an image.

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

Define a value once and reuse it. Change it in one place or per theme.

:root {
  --brand: #0f766e;
}

.button {
  background: var(--brand);
}

Write child rules inside the parent, as in a preprocessor. Supported natively in current browsers.

.card {
  padding: 1rem;

  & h2 {
    margin: 0;
  }

  &:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
  }
}

Order groups of styles so later layers win, regardless of specificity.

@layer reset, base, components;

@layer components {
  .button { padding: 0.5rem 1rem; }
}