CSS Cheat Sheet

Reference on MDN

Basics

Basic Selectors

Selector example Description
* all elements
.my-class elements with class my-class
#my-id elemens with id my-id
div all <div> elements

Combinators

Selector example Description
div, p all <div> and <p> elements
div p all <p> elements that are descendants of <div>
div > p all p elements that are direct descendants of <div>
div + p all <p> elements that a next sibling of <div>
div.my-class:hover all div elements with class my-class and pseudo-class hover

Attribute Selectors

Selector example Description
[attr] element with attribute attr
[attr=value] element with attribute attr whose value value
[attr^=value] element with attribute attr whose value starts with value
…

Pseudo-classes

Selector example Description
:hover element over which a mouse cursor hovers
:focus element with focus
:disabled disabled element (e.g. <input>)
:visited visited hyperlink
:target element that matches fragment part of current URL
:first-child element which is the first child of its parent
:nth-child(3n+2) every third child element of a parent, starting with the second child (i.e. child 2, 5, 8, …)
:not(selector) elements which do not match selector
…

Pseudo-classes

Selector example Description
::before a virtual firts child of the selected element
::after a virtual last child of the selected element
::first-line first line of text content of an element
::selection the portion of a document that has been highlighted by the user
…

CSS properties

Text styling

Useful CSS properties:

Box model

Useful CSS properties: