What is a css selector

What is a css selector
Remacle Jean-Claude
2 minutes
2021-06-02
css
selector
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.

Selectors

You can group the selectors in following groups:

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

Type

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

h1 { }

Class

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 { }

ID

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

#title { }

 Attribute

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"] { }

Pseudo-classes

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 { }

Pseudo-elements

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 { }

Combinators

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 { }