CSS selectors & units cheat sheet

Select all the tags of the same type.

html {}
h1 {}
p {}

Select an element that has a class.

.masthead {}
.nav {}
.contact {}

There needs to be a matching class in the HTML:

<header class="masthead">
  <nav class="nav">
    ⋮
  </nav>
</header>

Select an element that has the ID.

#heading-1 {}
#github {}
#top {}

There needs to be a matching ID in the HTML:

<a id="top" href="#top">Top</a>

Select an element that’s a descendant of another element.

ul li {}
nav a {}
ul li {}

Select an element directly inside another element.

ul > li {}
h1 > span {}
footer > .copyright {}

Select an element immediately beside another element.

h1 + p {}
hr + p {}
li + li {}

Select an element that’s at the same level.

p ~ p {}
h1 ~ p {}
dd ~ dt {}

Select an element by it’s attribute.

Good for styling links differently if they’re external.

[data-state="active"] {}
[href^="http"] {}
[download] {}

More on attribute selectors below.

Select the element when it’s the first inside its parent.

p:first-child {}
ul li:first-child {}
.person:first-child {}

Select the element when it’s the last inside its parent.

li:last-child {}
p:last-child {}
.item:last-child {}

Select an element when it’s the only thing inside its parent.

li:only-child {}

Select an element by it’s number.

Good for zebra-striping table rows.

li:nth-child(2) {}
tr:nth-child(odd) {}
div:nth-child(5n) {}

Select an element by it’s number, counting backwards from the end.

/* Third from the bottom */
li:nth-last-child(3) {}

Select an element by it’s number, but only counting others that match—not all children.

/* Second <p> element in its parent */
p:nth-of-type(2) {}

Select an element by it’s number, counting backwards from the end.

/* Second <p> from the bottom */
p:nth-last-of-type(2) {}

Select an element that’s the first of its kind within its parent.

p:first-of-type {}

Select an element that’s the last of its kind within its parent.

p:last-of-type {}

Select an element when it’s the only child of its parent of a specific kind.

p:only-of-type {}
section div:only-of-type {}

Select an element it has no children.

ul:empty {}

Select an element when its disabled attribute is set.

button:disabled {}

Select an <input> when its checked attribute is set.

input:checked {}

Select an element when the URL matches its ID.

li:target {}

Select matching elements that do not match the selection inside the ()

p:not(.mammal) {}
input:not(:checked) {}

A hidden element before the content of most elements.

blockquote::before {
  content: "“";
  font-size: 5rem;
}

Learn more about ::before.

A hidden element after the content of most elements.

blockquote::after {
  content: "”";
  font-size: 5rem;
}

Learn more about ::after.

Select the first line of text.

Good for highlighting the first line of a paragraph.

p::first-line {}

Select the first character in the text.

Good for drop caps.

p::first-letter {}

Style an element when it has been selected and highlighted.

::selection {
  color: red;
}

For styling a link that hasn’t been visited.

a:link {
  color: #4484c2;
}

For styling a link that has been visited.

a:visited {
  color: #ccc;
}

For styling an element when the mouse hovers over it.

a:hover {
  color: #00f;
}

For styling an element for when the keyboard focuses it.

Only works on <a>, <button>, and form inputs by default.

button:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}

For styling an element when the mouse button is clicked down on it.

a:active {
  color: #f33;
}

Select when an element has a specific attribute.

[download] {}

Select when an attribute that’s exactly the same.

[rel="external"] {}
[data-state="visible"] {}

Select when an attribute starts with some text.

[href^="http://"] {}

Select when an attribute ends with some text.

[src$=".jpg"] {}

Select when an attribute contains some text anywhere.

[class*="unit"] {}

Select an element when its attribute matches one item from a space separated list.

<p class="unit xs-1 s-1 m-1"></p>

[class~="s-1"] {}

Select an element when its attribute matches one item from a dash separated list.

<p class="super-duper-long-class-name"></p>

[class|="duper"] {}

Allows the search to ignore upper vs. lower case letters.

[lang="en-ca" i] {}

Standardized, named colours. Color keywords.

background-color: red;
color: darkorange;
border-color: hotpink;

Hex colours start with a hash: #.

Three separate numbers: red, green, blue.

background-color: #000000;
color: #ff3333;
border-color: #b95f4;
outline-color: darkorange;

Simplify pairs: #000, #fff, #f33

background-color: #000;
border-color: #fff;
color: #f22;

Specify colours using red, green & blue numbers.

background-color: rgb(255, 255, 255);
color: rgb(255, 0, 0);
border-color: rgb(124, 65, 99);

RGB with semi-transparent/opacity.

background-color: rgba(0, 0, 0, .5);
color: rgba(255, 0, 0, .75);
border-color: rgba(124, 65, 99, .8);

Specify colours using the hue, saturation, lightness system.

Different from Photoshop’s HSB system.

background-color: hsl(0, 100%, 100%);
color: hsl(53, 100%, 50%);
border-color: hsl(167, 38%, 59%);

HSL Color Picker

HSL with semi-transparent/opacity.

background-color: hsla(0, 100%, 100%, .5);
color: hsla(53, 100%, 50%, .7);
border-color: hsla(167, 38%, 59%, .3);

The transparent keyword can be used to remove a colour.

background-color: transparent;

The currentColor keyword can be used to capture the color of the same element.

color: red;
border-color: currentColor; /* Will be red */

CSS pixels—different sizes for every device.

100px is exactly 100 pixels in all situations.

Based on the font-size of the parent (or current element).

1em is 1 × the parent element’s size.

0.5em is 0.5 × the parent element’s size.

Based on the font-size set in the html element.

1.5rem is 1.5 × the html element’s font size.

Percentage

A percentage of the parent element.

100% is to whole width of the parent element.

If the parent element is 50% wide, and this element is 50% wide, then it only takes up 25% of the original grand parent element.

Viewport height

Like percentage, but based on the height of the window.

100vh is the whole height of the window.

50vh is half the height of the window.

Viewport width

Like percentage, but based on the width of the window.

75vw is three-quarters the width of the window.

Always use rem for font sizes because it’s easier to manage.

Never—ever—user px for font sizes.

The idea being that we want the margins and paddings to increase when the font size increases.

Most often I use em for padding and rem for margin

Most often use % for widths because we want most things to be flexible.

Sometimes using px or em for widths is okay too.

Maximum widths required a fixed measurement—so em for max-width works because we want the max-width to increase as the font size increases.

Use pixels for accuracy—when things should always be the same size: logos as an example.

Or use pixels for borders—though sometimes em for border is cool too.

Never—ever—user px for font sizes.