css-selectors-units-cheat-sheet.md

title	tags	desc	layout	groups
CSS selectors & units cheat sheet	css selectors class id units rem px percent cheat sheet	A cheat sheet covering the basics of CSS selectors and units.	cheatsheet	title items Selectors name details `Tag` Select all the tags of the same type. ```css html {} h1 {} p {} ``` name details `.` — Class Select an element that has a class. ```css .masthead {} .nav {} .contact {} ``` There needs to be a matching class in the HTML: ```html <header class="masthead"> <nav class="nav"> ⋮ </nav> </header> ``` name details `#` — ID Select an element that has the ID. ```css #heading-1 {} #github {} #top {} ``` There needs to be a matching ID in the HTML: ```html <a id="top" href="#top">Top</a> ``` name details `Space` — Descendant Select an element that’s a descendant of another element. ```css ul li {} nav a {} ul li {} ``` name details `>` — Child Select an element directly inside another element. ```css ul > li {} h1 > span {} footer > .copyright {} ``` name details `+` — Adjacent sibling Select an element immediately beside another element. ```css h1 + p {} hr + p {} li + li {} ``` name details `~` — General sibling Select an element that’s at the same level. ```css p ~ p {} h1 ~ p {} dd ~ dt {} ``` name details `[]` — Attribute Select an element by it’s attribute. Good for styling links differently if they’re external. ```css [data-state="active"] {} [href^="http"] {} [download] {} ``` [More on attribute selectors below.](#attribute-selectors) title items Pseudo classes name details `:first-child` Select the element when it’s the first inside its parent. ```css p:first-child {} ul li:first-child {} .person:first-child {} ``` name details `:last-child` Select the element when it’s the last inside its parent. ```css li:last-child {} p:last-child {} .item:last-child {} ``` name details `:only-child` Select an element when it’s the only thing inside its parent. ```css li:only-child {} ``` name details `:nth-child()` Select an element by it’s number. Good for zebra-striping table rows. ```css li:nth-child(2) {} tr:nth-child(odd) {} div:nth-child(5n) {} ``` name details `:nth-last-child()` Select an element by it’s number, counting backwards from the end. ```css /* Third from the bottom */ li:nth-last-child(3) {} ``` name details `:nth-of-type()` Select an element by it’s number, but only counting others that match—not all children. ```css /* Second <p> element in its parent */ p:nth-of-type(2) {} ``` name details `:nth-last-of-type()` Select an element by it’s number, counting backwards from the end. ```css /* Second <p> from the bottom */ p:nth-last-of-type(2) {} ``` name details `:first-of-type` Select an element that’s the first of its kind within its parent. ```css p:first-of-type {} ``` name details `:last-of-type` Select an element that’s the last of its kind within its parent. ```css p:last-of-type {} ``` name details `:only-of-type` Select an element when it’s the only child of its parent of a specific kind. ```css p:only-of-type {} section div:only-of-type {} ``` name details `:empty` Select an element it has no children. ```css ul:empty {} ``` name details `:disabled` Select an element when its `disabled` attribute is set. ```css button:disabled {} ``` name details `:checked` Select an `<input>` when its `checked` attribute is set. ```css input:checked {} ``` name details `:target` Select an element when the URL matches its ID. ```css li:target {} ``` name details `:not()` Select matching elements that *do not* match the selection inside the `()` ```css p:not(.mammal) {} input:not(:checked) {} ``` title items Pseudo elements name details `::before` A hidden element before the content of most elements. ```css blockquote::before { content: "“"; font-size: 5rem; } ``` [Learn more about ::before.](/topics/before-after/) name details `::after` A hidden element after the content of most elements. ```css blockquote::after { content: "”"; font-size: 5rem; } ``` [Learn more about ::after.](/topics/before-after/) name details `::first-line` Select the first line of text. Good for highlighting the first line of a paragraph. ```css p::first-line {} ``` name details `::first-letter` Select the first character in the text. Good for drop caps. ```css p::first-letter {} ``` name details `::selection` Style an element when it has been selected and highlighted. ```css ::selection { color: red; } ``` title items Interaction selectors name details `:link` For styling a link that hasn’t been visited. ```css a:link { color: #4484c2; } ``` name details `:visited` For styling a link that has been visited. ```css a:visited { color: #ccc; } ``` name details `:hover` For styling an element when the mouse hovers over it. ```css a:hover { color: #00f; } ``` name details `:focus` For styling an element for when the keyboard focuses it. Only works on `<a>`, `<button>`, and form inputs by default. ```css button:focus { outline: 3px solid #000; outline-offset: 2px; } ``` name details `:active` For styling an element when the mouse button is clicked down on it. ```css a:active { color: #f33; } ``` title items Attribute selectors name details *Has an attribute* Select when an element has a specific attribute. ```css [download] {} ``` name details *Exact match* Select when an attribute that’s exactly the same. ```css [rel="external"] {} [data-state="visible"] {} ``` name details *Starts with* Select when an attribute starts with some text. ```css [href^="http://"] {} ``` name details *Ends with* Select when an attribute ends with some text. ```css [src$=".jpg"] {} ``` name details *Contains* Select when an attribute contains some text anywhere. ```css [class*="unit"] {} ``` name details *Contains when separated by spaces* Select an element when its attribute matches one item from a space separated list. ```html <p class="unit xs-1 s-1 m-1"></p> ``` ```css [class~="s-1"] {} ``` name details *Contains when separated by dashes* Select an element when its attribute matches one item from a dash separated list. ```html <p class="super-duper-long-class-name"></p> ``` ```css [class|="duper"] {} ``` name details *Case insensitive* Allows the search to ignore upper vs. lower case letters. ```css [lang="en-ca" i] {} ``` title items Colours name details **Keywords** Standardized, named colours. [Color keywords](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords). ```css background-color: red; color: darkorange; border-color: hotpink; ``` name details **Hexadecimal** Hex colours start with a hash: `#`. Three separate numbers: red, green, blue. ```css background-color: #000000; color: #ff3333; border-color: #b95f4; outline-color: darkorange; ``` Simplify pairs: `#000`, `#fff`, `#f33` ```css background-color: #000; border-color: #fff; color: #f22; ``` name details **RGB** Specify colours using red, green & blue numbers. ```css background-color: rgb(255, 255, 255); color: rgb(255, 0, 0); border-color: rgb(124, 65, 99); ``` name details **RGBA** RGB with semi-transparent/opacity. ```css background-color: rgba(0, 0, 0, .5); color: rgba(255, 0, 0, .75); border-color: rgba(124, 65, 99, .8); ``` name details **HSL** Specify colours using the hue, saturation, lightness system. Different from Photoshop’s HSB system. ```css background-color: hsl(0, 100%, 100%); color: hsl(53, 100%, 50%); border-color: hsl(167, 38%, 59%); ``` [HSL Color Picker](http://hslpicker.com/) name details **HSLA** HSL with semi-transparent/opacity. ```css background-color: hsla(0, 100%, 100%, .5); color: hsla(53, 100%, 50%, .7); border-color: hsla(167, 38%, 59%, .3); ``` name details **Transparency** The `transparent` keyword can be used to remove a colour. ```css background-color: transparent; ``` name details **Current colour** The `currentColor` keyword can be used to capture the `color` of the same element. ```css color: red; border-color: currentColor; /* Will be red */ ``` title items Units name details `px` *CSS pixels*—different sizes for every device. `100px` is exactly 100 pixels in all situations. name details `em` 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. name details `rem` Based on the font-size set in the `html` element. `1.5rem` is 1.5 × the `html` element’s font size. name details `%` *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. name details `vh` *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. name details `vw` *Viewport width* Like percentage, but based on the width of the window. `75vw` is three-quarters the width of the window. title items Unit rules name details **Use `rem` for `font-size`** Always use `rem` for font sizes because it’s easier to manage. **Never—ever—user `px` for font sizes.** name details **Use `rem` or `em` for paddings and margins** 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` name details **Use `%` for widths** Most often use `%` for widths because we want most things to be flexible. Sometimes using `px` or `em` for widths is okay too. name details **Use `em` for maximum widths** 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. name details **Use `px` for borders and accuracy** 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.**