CSS Selectors

You have met selectors already. A CSS selector is the first paart of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.
There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article's subarticles we will look at the different groups of selectors in more detail.

1. Type, class, and ID selectors

This group includes selectors that target an HTML element such as an h1
h1 { }

It also includes selectors which target a class:
.box { }
or, an ID:
#unique { }

2. Attribute selectors


This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:
a[title] { }

3. Pseudo-classes and pseudo-elements


This group of selectors includes pseudo-classes, which style certain states of an element. The :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:
a:hover { }
It also includes pseudo-elements, which selectt a certain part of an element rather than the element itself. For example, ::first-line always selects the first line of text inside an element , acting as if a span was wrapped around the first formatted line and then:
p::first-line { }

4. Combinators

The final group of selectors combine other selectors in order to target elements within our documents. The following, for example, selects paragraphs that are direct children of article elements using the child combinator (>):
article > p { }