Most important CSS selectors

Selectors are used to target specific HTML elements

There are a lot of Selectors in CSS but the "top" ones are :
Type (ex: paragraph tag, header tag, strong tag...)

The ID tag is very popular and his main purpose is to be unique on the page. It is defined with the hash character "#"

The CLASS tag allow users to apply properties on all the elements that share it`s tag-name. It is defined with the full stop "."

Below you will find a short list with the most popular selectors and a few words about each of them.

  • Selector
  • Example description
  • #test
  • Selects the element with id="test"
  • .test
  • Selects all elements with class="test"
  • *
  • Selects all elements
  • p
  • Selects all <p> elements
  • div, p
  • Selects all <div> and <p> elements
  • div p
  • Selects all <p> elements inside a <div> element
  • a:hover
  • Selects links when mouse is over
  • a:active
  • Selects the active link
  • p::after
  • Insert pseudo-element after the content of <p> element
  • p::before
  • Insert pseudo-element before the content of <p> element
  • div > p
  • Selects all <p> elements that have a <div> as parent element
  • div + p
  • Selects each <p> element that is immediately after a <div> element
  • p ~ ul
  • Selects each <ul> element that is preceded by a <p> element
  • p:empty
  • Selects <p> element that has no children elements
  • p:first-child
  • Selects every <p> element that is the first child of its parent
  • p:last-child
  • Selects every <p> element that is the last child of its parent
  • p:nth-child(odd)
  • Selects all odd <p> element that is child of its parent
  • input:checked
  • Selects <input /> element that has the state of checked
  • input:disabled
  • Selects <input /> element that is disabled
  • input:focus
  • Selects <input /> element that has the state of focus

Share This:

Feel free to leave a comment!

You might alos be interested in: