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
