CSS Selectors Cheat Sheet

CSS selectors cheat sheet gives us a quick overview of what we'll learn in CSS selectors

Designers often confuse with the attribute selectors, element selectors, pseudo elements, pseudo-classes, combinators. But they all are selectors. And this cheat sheet has been presented in such a way that it ends up confusing between different kind of selectors.

Selector's cheat sheet represents all the selectors with examples so that you can learn it easily and quickly.

See a complete list of CSS selectors.

A detailed explanation of CSS Selectors

1. Element Selectors

The elements are selected by the element names or universal selector.

Type selector

The element selectors select the elements by the element name or a list of element names and then applies CSS properties to the selected elements.

p, span, code{ color:red; }
</>

Universal selector (*)

'*' is a universal selector. It selects all of the elements and applies CSS properties.

*{ color:red; }
</>

2. Attribute selectors

Attribute selectors select those elements that have attributes and values according to the rules of attributes selectors.

[att]

[att] selects those elements that have 'att' attribute.

input[type]
</>

[att=val]

[att=val] selects those elements that have 'att' attribute with the value 'val'

div[title="warning"]
</>

[att~=val]

'~' selector selects those elements that have 'att' attribute with at least one value matching the 'val' value

a[rel~="next"]
</>

[att|=val]

'|' selector selects the elements that have 'att' attribute with the value 'val' following a hyphen (-).

a[hreflang|="en-US"]
</>

[att^=val]

'^' selector selects the elements that have 'att' attribute and the value starting with 'val'.

img[type^="image/"]
</>

[att$=val]

'$' selector selects those elements that have 'att' attribute and the value ending with 'val'

img[type$="png"]
</>

[att*=val]

'*' selector selects the elements that have 'att' attribute with the 'val' value as substring.

p[class*="sign"]
</>

3. Pseudo elements

A pseudo element consists of double color (::) following the name of pseudo element. And pseudo element applies CSS properties to the associated element.

It accesses the content that is not present in the hierarchy. And that is not accessible by the document language in a document tree.

::firs-line

::first-line selects firs-line of associated element and applies CSS properties.

p::first-line{font-size:20px;}
</>

::first-letter

::first-letter selects the first letter of the associated element and applies CSS properties.

p::first-letter{text-transform:uppercase;}
</>

::selection

::selection represents the text selected by the user in the associated element.

div::selection{background-color:lightgreen;}
</>

::after

::after selects the content generated from CSS and the generated content is after the associated element.

div::after{content:"...learn more";}
</>

::before

::before selects the content generated from CSS and the generated content is before the associated element.

div::before{content:"Tip: ";}
</>

::placeholder

::placeholder pseudo element selects the input elements that have placeholder attribute.

input::placeholder{color:blue;}
</>

4. Combinators

It selects elements based on the relation between elements within the hierarchy of elements i.e based on whether it is child, next, or a descedent element.

Descendent combinator

descendent combinator selects and applies CSS properties to the orbitrary child element.

div p{background-color:green;}
</>

Child combinator ('>')

child combinator selects and applies CSS properties to the child element.

ol > li{ background-color:lightblue;}
</>

Next-sibling combinator ('+')

'+' combinator selects and applies CSS properties to the next immediate element of the current element.

p+code{ color:red;}
</>

Following combinator ('~')

'~' combinator selects and applies CSS properties to the next element of the current element.

code ~ kbd{ color:rgb(0,225,0);}
</>

5. Pseudo classes

Pseudo class consists of single colon (':') and pseudo class name.

5.1 User Action Pseudo-classes

This pseudo-class is used when a user interacts with a link in anyway.

:link

:link selects and applies CSS properties to all of the hyperlinks.

a{color:black;}
</>

:hover

:hover applies CSS properties to the hyperlink when a user hovers the mouse over the link.

a:hover{color:blue;}
</>

:visited

:visited applies CSS properties to the hyperlink that has already been visited.

a:visited{color:red;}
</>

:active

:active pseudo class applies CSS properties to the hyperlink within the active duration (the duration between mouse clicking and releasing).

a:active{color:green;}
</>

5.2 Input Pseudo-classes

Input pseudo class selects the input element based on the bool attribute or state of the input element.

:disabled

:disabled pseudo class selects the input element that is disabled by the disabled attribute.

input:disabled{ background-color:gray;	}
</>

:enabled

:enabled selects the input elements that are enabled and input elements are enabled by default.

input:enabled{ border-radius:2px; }
</>

:checked

:checked selects the input elements that are already checked or checked by the user.

input:checked{ height:20px; }
</>

:read-only

:read-only pseudo class selects the input elements that have readonly attribute.

input:read-only{ background-color:gray; }
</>

:placeholder-shown

:placeholder-shown pseudo class selects the elements that have placeholder attribute

input:placeholder-shown{ font-size:20px; }
</>

:out-of-range

:out-of-range pseudo class selects the input element where the value is out of range.

input:out-of-range{ color:red;	}
</>

:required

:required pseudo class selects the input element that requires information necessarily.

input:required{ box-shadow:3px 3px 5x rgba(200,200,200,0.5); }
</>

5.3 Structural Pseudo-classes

This pseudo class selects child elements according to the position of child element with respect to the parent and the position is evaluated according to the expression.

:first-child

:first-child selects first child of the parent element.

table tr:first-child{ background-color:gray; }
</>

:nth-child(E)

:nth-child(E) selects the child element in accordance with the value of an expression (E) that evaluates to the position of element from the start.

table tr:nth-child(2n+1){ background-color:gray; }
</>

:last-child

:last-child selects the last child of the parent element.

ul li:last-child{ background-color:lightblue; }
</>

:nth-last-child(E)

:nth-last-child(E) selects the child element in accordance with the value of an expression (E) that evaluates to the position of element from the end.

table tr:nth-last-child(2n+1){ background-color:gray; }
</>

:only-child

:only-child selects the element that is a sole child of the parent element.

div p:only-child{ background-color:lightblue; }
</>

:first-of-type

:first-of-type selects the first child of a specific type of element. In this case, parent has more than one types of elements.

dl dd:first-of-type{ background-color:lightblue; }
</>

:nth-of-type(E)

:nth-of-type(E) selects the child of a specific type of element in accordance with the value of expression (E) that evaluates to the position of element from the start. In this case, parent has more than one type of elements.

tr td:nth-of-type(2n+1){ background-color:gray; }
</>

:last-of-type

:last-of-type selects the last chid of a specific type of element.

dl dd:last-of-type{ background-color:lightblue; }
</>

:nth-last-of-type(n)

:nth-last-of-type(E) selects the child of a specific type of element in accordance with the value of expression (E) that evaluates to the position of element from the end. In this case, parent has more than one types of elements.

body > h2:nth-last-of-type(n+6){ color:blue; }
</>

Summary

This cheat sheet covers all of the topics and sub-topics of selectors. In this page, you see a definition and an example related to every sub-topic. But you can learn it thoroughly in CSS tutorials.