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