CSS selectors & units cheat sheet

Selectors

  • Tag

    • Select all the tags of the same type.

    • html {}
      h1 {}
      p {}
      
  • . — Class

    • 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>
      
  • # — ID

    • 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>
      
  • Space — Descendant

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

    • ul li {}
      nav a {}
      ul li {}
      
  • > — Child

    • Select an element directly inside another element.

    • ul > li {}
      h1 > span {}
      footer > .copyright {}
      
  • + — Adjacent sibling

    • Select an element immediately beside another element.

    • h1 + p {}
      hr + p {}
      li + li {}
      
  • ~ — General sibling

    • Select an element that’s at the same level.

    • p ~ p {}
      h1 ~ p {}
      dd ~ dt {}
      
  • [] — Attribute

    • 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.

Pseudo classes

  • :first-child

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

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

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

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

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

    • li:only-child {}
      
  • :nth-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) {}
      
  • :nth-last-child()

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

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

    • 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) {}
      
  • :nth-last-of-type()

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

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

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

    • p:first-of-type {}
      
  • :last-of-type

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

    • p:last-of-type {}
      
  • :only-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 {}
      
  • :empty

    • Select an element it has no children.

    • ul:empty {}
      
  • :disabled

    • Select an element when its disabled attribute is set.

    • button:disabled {}
      
  • :checked

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

    • input:checked {}
      
  • :target

    • Select an element when the URL matches its ID.

    • li:target {}
      
  • :not()

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

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

Pseudo elements

  • ::before

    • A hidden element before the content of most elements.

    • blockquote::before {
        content: "“";
        font-size: 5rem;
      }
      
    • Learn more about ::before.

  • ::after

    • A hidden element after the content of most elements.

    • blockquote::after {
        content: "”";
        font-size: 5rem;
      }
      
    • Learn more about ::after.

  • ::first-line

    • Select the first line of text.

    • Good for highlighting the first line of a paragraph.

    • p::first-line {}
      
  • ::first-letter

    • Select the first character in the text.

    • Good for drop caps.

    • p::first-letter {}
      
  • ::selection

    • Style an element when it has been selected and highlighted.

    • ::selection {
        color: red;
      }
      

Interaction selectors

  • :link

    • For styling a link that hasn’t been visited.

    • a:link {
        color: #4484c2;
      }
      
  • :visited

    • For styling a link that has been visited.

    • a:visited {
        color: #ccc;
      }
      
  • :hover

    • For styling an element when the mouse hovers over it.

    • a:hover {
        color: #00f;
      }
      
  • :focus

    • 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;
      }
      
  • :active

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

    • a:active {
        color: #f33;
      }
      

Attribute selectors

  • Has an attribute

    • Select when an element has a specific attribute.

    • [download] {}
      
  • Exact match

    • Select when an attribute that’s exactly the same.

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

    • Select when an attribute starts with some text.

    • [href^="http://"] {}
      
  • Ends with

    • Select when an attribute ends with some text.

    • [src$=".jpg"] {}
      
  • Contains

    • Select when an attribute contains some text anywhere.

    • [class*="unit"] {}
      
  • Contains when separated by spaces

    • 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"] {}
      
  • Contains when separated by dashes

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

    • <p class="super-duper-long-class-name"></p>
      
      [class|="duper"] {}
      
  • Case insensitive

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

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

Colours

  • Keywords

    • Standardized, named colours. Color keywords.

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

    • 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;
      
  • RGB

    • Specify colours using red, green & blue numbers.

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

    • 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);
      
  • HSL

    • 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

  • HSLA

    • 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);
      
  • Transparency

    • The transparent keyword can be used to remove a colour.

    • background-color: transparent;
      
  • Current colour

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

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

Units

  • px

    • CSS pixels—different sizes for every device.

    • 100px is exactly 100 pixels in all situations.

  • 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.

  • rem

    • 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.

  • 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.

  • vw

    • Viewport width

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

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

Unit rules

  • Use rem for font-size

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

    • Never—ever—user px for font sizes.

  • 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

  • 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.

  • 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.

  • 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.