CSS Selector

A CSS selector is the first part 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.In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work.

CSS Selector List

If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors.

p {
  text-align: right;
  color: blue;
}

CSS Type,class,ID Selectors:

This group includes selectors that target an HTML element such as an <h2>.

h2 { }

Selector which target a class:

.box { }

or an id,

#unique { }

CSS Attributes selector:

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

a[title] { }

Or even make a selection based on the presence of an attribute with a particular value:

a[href="https://selector.com"] { }

The CSS Universal Selector:

The universal selector (*) selects all HTML elements on the page.

* {
  text-align: right;
  color: green;
}

Reference Table of Selector:

Selector	Example
Type selector	h1 {  }
Universal selector	* {  }
Class selector	.box {  }
id selector	#unique { }
Attribute selector	a[title] {  }
Pseudo-class selectors	p:first-child { }
Pseudo-element selectors	p::first-line { }
Descendant combinator	article p
Child combinator	article > p
Adjacent sibling combinator	h1 + p
General sibling combinator	h1 ~ p