What is a css selector

What is a css selector
Remacle Jean-Claude
2 minutes
what is

The CSS selector is the first part of a CSS rule.
This pattern of elements and terms tells the browser which elements it needs to select to apply the css property values that are defined within this rule.


You can group the selectors in following groups:

  • type
  • class
  • id
  • attribute
  • pseudo-classes
  • pseudo-elements
  • combinators


The type selector targets the element such as "h1".

h1 { }


The class selector targets all the elements which have the specified class name.
A class name may appear several times on the page and on different elements.

.block { }


The id selector targets the elements which have this id.
Id names may only appear once on the page.

#title { }


With this group of selectors you have different ways to select elements based on the presence and the value of a certain attribute on an element.

img[title] { }
a[href="https://example.com"] { }


This group of selectors styles a certain states of an element.

For example, the :hover pseudo-class selects an element only when it is being hovered over by the mouse pointer.

a:hover { }


This group of selectors styles a certain part of an element and not the element itself.

For example, ::first-line always selects the first line of text inside an element.

p::first-line { }


This group of selectors combines selectors in order to target elements within the document.

The following code example selects all paragraphs that are direct children of  the article element using the child combinator ">".

article > p { }