1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

CSS selectors & units cheat sheet

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 1/8
1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

Selectors

Tag . — Class # — ID
Select all the tags of the same type. Select an element that has a class. Select an element that has the ID.
html {} .masthead {} #heading-1 {}
h1 {} .nav {} #github {}
p {} .contact {} #top {}

There needs to be a matching class in the There needs to be a matching ID in the HTML:
HTML: <a id="top" href="#top">Top</a>
<header class="masthead">
<nav class="nav">
⋮
</nav>
</header>

Space — Descendant > — Child + — Adjacent sibling

Select an element that's a descendant of Select an element directly inside another Select an element immediately beside another
another element. element. element.
ul li {} ul > li {} h1 + p {}
nav a {} h1 > span {} hr + p {}
ul li {} footer > .copyright {} li + li {}

~ — General sibling [] — Attribute

Select an element that's at the same level. Select an element by it's attribute.
p ~ p {}
Good for styling links differently if they're
h1 ~ p {} external.
dd ~ dt {}
[data-state="active"] {}
[href^="http"] {}
[download] {}

More on attribute selectors below.

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 2/8
1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

Pseudo classes

:first-child :last-child :only-child

Select the element when it's the first inside its Select the element when it's the last inside its Select an element when it's the only thing
parent. parent. inside its parent.
p:first-child {} li:last-child {} li:only-child {}
ul li:first-child {} p:last-child {}
.person:first-child {} .item:last-child {}

:nth-child() :nth-last-child() :nth-of-type()

Select an element by it's number. Select an element by it's number, counting Select an element by it's number, but only
Good for zebra-striping table rows. backwards from the end. counting others that match—not all children.
li:nth-child(2) {} /* Third from the bottom */ /* Second <p> element in its
tr:nth-child(odd) {} li:nth-last-child(3) {} parent */
div:nth-child(5n) {} p:nth-of-type(2) {}

:nth-last-of-type() :first-of-type :last-of-type

Select an element by it's number, counting Select an element that's the first of its kind Select an element that's the last of its kind
backwards from the end. within its parent. within its parent.
/* Second <p> from the bottom */ p:first-of-type {} p:last-of-type {}
p:nth-last-of-type(2) {}

:only-of-type :empty :disabled

Select an element when it's the only child of its Select an element it has no children. Select an element when its disabled
parent of a specific kind. ul:empty {}
attribute is set.
p:only-of-type {} button:disabled {}
section div:only-of-type {}

:checked :target :not()

Select an <input> when its checked Select an element when the URL matches its Select matching elements that do not match
attribute is set. ID. the selection inside the ()
input:checked {} li:target {} p:not(.mammal) {}
input:not(:checked) {}

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 3/8
1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

Pseudo elements

::before ::after ::first-line

A hidden element before the content of most A hidden element after the content of most Select the first line of text.
elements. elements. Good for highlighting the first line of a
blockquote::before { blockquote::after { paragraph.
content: "“"; content: "”"; p::first-line {}
font-size: 5rem; font-size: 5rem;
} }

Learn more about ::before. (/topics/before- Learn more about ::after. (/topics/before-after/)
after/)

::first-letter ::selection
Select the first character in the text. Style an element when it has been selected and
Good for drop caps. highlighted.
p::first-letter {} ::selection {
color: red;
}

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 4/8
1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

Interaction selectors

:link :visited :hover

For styling a link that hasn't been visited. For styling a link that has been visited. For styling an element when the mouse hovers
a:link { a:visited { over it.
color: #4484c2; color: #ccc; a:hover {
} } color: #00f;
}

:focus :active
For styling an element for when the keyboard For styling an element when the mouse button
focuses it. is clicked down on it.
Only works on <a> , <button> , and form a:active {
inputs by default. color: #f33;
}
button:focus {
outline: 3px solid #000;
outline-offset: 2px;
}

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 5/8
1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

Attribute selectors

Has an attribute Exact match Starts with

Select when an element has a specific Select when an attribute that's exactly the Select when an attribute starts with some text.
attribute. same. [href^="http://"] {}
[download] {} [rel="external"] {}
[data-state="visible"] {}

Ends with Contains Contains when separated by spaces

Select when an attribute ends with some text. Select when an attribute contains some text Select an element when its attribute matches
[src$=".jpg"] {} anywhere. one item from a space separated list.
[class*="unit"] {} <p class="unit xs-1 s-1 m-1"></p>

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

Contains when separated by dashes Case insensitive

Select an element when its attribute matches Allows the search to ignore upper vs. lower case
one item from a dash separated list. letters.
<p class="super-duper-long-class- [lang="en-ca" i] {}
name"></p>

[class|="duper"] {}

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 6/8
1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

Colours

Keywords Hexadecimal RGB

Standardized, named colours. Color keywords Hex colours start with a hash: # . Specify colours using red, green & blue
(https://developer.mozilla.org/en- Three separate numbers: red, green, blue. numbers.
US/docs/Web/CSS/color_value#Color_keywords). background-color: #000000; background-color: rgb(255, 255,
background-color: red; color: #ff3333; 255);
color: darkorange; border-color: #b95f4; color: rgb(255, 0, 0);
border-color: hotpink; outline-color: darkorange; border-color: rgb(124, 65, 99);

Simplify pairs: #000 , #fff , #f33

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

RGBA HSL HSLA

RGB with semi-transparent/opacity. Specify colours using the hue, saturation, HSL with semi-transparent/opacity.
background-color: rgba(0, 0, 0,
lightness system. background-color: hsla(0, 100%,
.5); Different from Photoshop's HSB system. 100%, .5);
color: rgba(255, 0, 0, .75); color: hsla(53, 100%, 50%, .7);
background-color: hsl(0, 100%,
border-color: rgba(124, 65, 99, border-color: hsla(167, 38%, 59%,
100%);
.8); .3);
color: hsl(53, 100%, 50%);
border-color: hsl(167, 38%, 59%);

HSL Color Picker (http://hslpicker.com/)

Transparency Current colour

The transparent keyword can be used to The currentColor keyword can be used
remove a colour. to capture the color of the same element.
background-color: transparent; color: red;
border-color: currentColor; /*
Will be red */

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 7/8
1/5/2020 CSS selectors & units cheat sheet · Web Dev Topics · Learn the Web

Units

px em rem
CSS pixels—different sizes for every device. Based on the font-size of the parent (or current Based on the font-size set in the html
100px is exactly 100 pixels in all situations. element). element.
1em is 1 × the parent element's size. 1.5rem is 1.5 × the html element's font
0.5em is 0.5 × the parent element's size. size.

% vh vw
Percentage Viewport height Viewport width
A percentage of the parent element. Like percentage, but based on the height of the Like percentage, but based on the width of the
100% is to whole width of the parent window. window.
element. 100vh is the whole height of the window. 75vw is three-quarters the width of the
If the parent element is 50% wide, and this 50vh is half the height of the window. window.
element is 50% wide, then it only takes up
25% of the original grand parent element.

Unit rules

Use rem for font-size Use rem or em for paddings and margins Use % for widths
Always use rem for font sizes because it's The idea being that we want the margins and Most often use % for widths because we want
easier to manage. paddings to increase when the font size most things to be flexible.
Never—ever—user px for font sizes. increases. Sometimes using px or em for widths is
Most often I use em for padding and okay too.
rem for margin

Use em for maximum widths Use px for borders and accuracy

Maximum widths required a fixed Use pixels for accuracy—when things should
measurement—so em for max-width always be the same size: logos as an example.
works because we want the max-width to Or use pixels for borders—though sometimes
increase as the font size increases. em for border is cool too.
Never—ever—user px for font sizes.

https://learn-the-web.algonquindesign.ca/topics/css-selectors-units-cheat-sheet/ 8/8