CSS can be both incredibly powerful and frustrating. With so many properties, values, and selectors to remember, it can be difficult to keep everything straight. With this CSS cheatsheet you can find quickly and easily the information needed to style websites . This will help you save time 😊
V 1.0 by @final-aerith
| Name | What selects & syntax |
|---|---|
| Universal selector |
/* Selects all HTML elements */
* { style properties } |
| Element selector (sometimes called a tag or type selector) |
/* All HTML elements of the specified type */
element { style properties } |
| Class selector |
/* The element(s) on the page with the specified class */
.class_name { style properties } |
| ID selector |
/* The element on the page with the specified ID */
#id_value { style properties } |
| Attribute selector |
/* All elements that have the given attribute */
element [ attr ] { style properties } /* Other options: [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] */ |
| Selector list |
/* Selects all the matching nodes */
element1 , element2 { style properties } |
| Name | What selects & syntax |
|---|---|
| Descendant combinator |
/* Selects nodes that are descendants of the first element
*/
" " (space) .parent .child { style properties } |
| Child combinator |
/* Selects nodes that are direct children of the first element
*/
> .parent > .child { style properties } |
| General sibling combinator |
/* Selects siblings */
~ .child ~ .sibling { style properties } |
| Adjacent sibling combinator |
/* Matches the second element only if it immediately follows
the first element */
+ .child + .sibling { style properties } |
| Column combinator |
/* Selects nodes which belong to a column */
|| column-selector || cell-selector { style properties } |
| Name | What selects & syntax |
|---|---|
| Element display state pseudo-classes |
/* Selects elements based on their display states*/
: selector : pseudo-class { style properties } /* Examples: :fullscreen :modal :picture-in-picture*/ |
| Input pseudo-classes |
/* Elements based on HTML attributes and the state that the
field is in before and after interaction*/
: selector : pseudo-class { style properties } /* Examples: :autofill :enabled :read-only*/ |
| Linguistic pseudo-classes |
/* Elements based on language or script direction*/
: selector : pseudo-class { style properties } /* Examples: :dir() :lang()*/ |
| Location pseudo-classes |
/* Relate to links, and to targeted elements within the current document*/
: selector : pseudo-class { style properties } /* Examples: :any-link :visited :target*/ |
| Resource state pseudo-classes |
/* Apply to media that is capable of being in a state where it would be described as playing, such as a video*/
: selector : pseudo-class { style properties } /* Examples: :playing :paused*/ |
| Time-dimensional pseudo-classes |
/* Apply when viewing something which has timing, such as a WebVTT caption track*/
: selector : pseudo-class { style properties } /* Examples: :current :past :future*/ |
| Tree-structural pseudo-classes |
/* Relate to the location of an element within the document tree*/
: selector : pseudo-class { style properties } /* Examples: :nth-child :first-child :last-of-type*/ |
| User action pseudo-classes |
/* Require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element*/
: selector : pseudo-class { style properties } /* Examples: :hover :focus :active*/ |
| Functional pseudo-classes |
/* Accept a selector list or forgiving selector list as a parameter*/
: selector : pseudo-class { style properties } /* Examples: :is( ) :not( ) :has( )*/ |
| Name | What selects & syntax |
|---|---|
| CSS pseudo-element |
/* Is a keyword added to a selector that lets you style a specific part of the selected element(s)*/
: selector :: pseudo-element { style properties } /* Examples: ::first-line ::before ::placeholder*/ |