Web4College

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.

1. Element Selectors

  • Type selector
  • Universal selector (*)

2. Attribute Selectors

  • [att]
  • [att=val]
  • [att~=val]
  • [att|=val]
  • [att^=val]
  • [att$=val]
  • [att*=val]

3. Pseudo Elements

  • ::firs-line
  • ::first-letter
  • ::selection
  • ::after
  • ::before
  • :placeholder

4. Combinators

  • Descendent combinator
  • Child combinator ('>')
  • Next-sibling combinator ('+')
  • Following combinator ('~')

5. User action Pseudo-classes

  • :link
  • :hover
  • :visited
  • :active

6. Input Pseudo-classes

  • :disabled
  • :enabled
  • :checked
  • :read-only
  • :placeholder-shown
  • :out-of-range
  • :required

7. Structural Pseudo-classes

  • :first-child
  • :nth-child(E)
  • :last-child
  • :nth-last-child(E)
  • :only-child
  • :first-of-type
  • :nth-of-type(E)
  • :last-of-type
  • :nth-last-of-type(n)

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.

Example
Try it
p, span, code{ color:red; }

Universal selector (*)

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

Example
Try it
*{ 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.

Example
Try it
input[type]

[att=val]

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

Example
Try it
div[title="warning"]

[att~=val]

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

Example
Try it
a[rel~="next"]

[att|=val]

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

Example
Try it
a[hreflang|="en-US"]

[att^=val]

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

Example
Try it
img[type^="image/"]

[att$=val]

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

Example
Try it
img[type$="png"]

[att*=val]

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

Example
Try it
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.

Example
Try it
p::first-line{font-size:20px;}

::first-letter

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

Example
Try it
p::first-letter{text-transform:uppercase;}

::selection

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

Example
Try it
div::selection{background-color:lightgreen;}

::after

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

Example
Try it
div::after{content:"...learn more";}

::before

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

Example
Try it
div::before{content:"Tip: ";}

::placeholder

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

Example
Try it
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.

Example
Try it
div p{background-color:green;}

Child combinator ('>')

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

Example
Try it
ol > li{ background-color:lightblue;}

Next-sibling combinator ('+')

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

Example
Try it
p+code{ color:red;}

Following combinator ('~')

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

Example
Try it
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.

Example
Try it
a{color:black;}

:hover

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

Example
Try it
a:hover{color:blue;}

:visited

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

Example
Try it
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).

Example
Try it
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.

Example
Try it
input:disabled{ background-color:gray;	}

:enabled

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

Example
Try it
input:enabled{ border-radius:2px; }

:checked

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

Example
Try it
input:checked{ height:20px; }

:read-only

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

Example
Try it
input:read-only{ background-color:gray; }

:placeholder-shown

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

Example
Try it
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.

Example
Try it
input:out-of-range{ color:red;	}

:required

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

Example
Try it
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.

Example
Try it
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.

Example
Try it
table tr:nth-child(2n+1){ background-color:gray; }

:last-child

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

Example
Try it
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.

Example
Try it
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.

Example
Try it
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.

Example
Try it
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.

Example
Try it
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.

Example
Try it
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.

Example
Try it
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.