Today we’ll be learning About CSS selectors in depth.

What is a selector in CSS ?

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.

Type of selector

Universal selector

The Universal selector (*) in CSS is used to select all the elements in a HTML document. It also includes other elements which are inside under another element.

• Syntax

* { style properties }

The CSS universal selector (*) matches elements of any type.

• Example

* {
  color: white;
  background-color: black;
}

Universal selectors can be name spaced when using @namespace. This is useful when dealing with documents containing multiple namespaces such as HTML5 with inline SVG or MathML, or XML that mixes multiple vocabularies.

• ns|* matches all elements in namespace ns

• | matches all elements

• |* matches all elements without any declared namespace

Type selector

The type selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc.

• Syntax

element { style properties }

The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document.

• Example

h1 {
    color: red;
    font-size: 3rem;
}

p {
    color: white;
    background-color: gray;
}

Type selectors can be name spaced when using @namespace. This is useful when dealing with documents containing multiple namespaces such as HTML5 with inline SVG or MathML, or XML that mixes multiple vocabularies.

• ns|h1 matches h1 elements in namespace ns

• *|h1 matches all h1 elements

• |h1 matches all h1 elements without any declared namespace

Class selector

The class selector selects HTML elements with a specific class attribute.

• Syntax

.class_name { style properties }

The CSS class selector matches elements by class name. In other words, it selects all elements of the given type within a document.

• Example

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

ID selector

The id selector uses the id attribute of an HTML element to select a specific element.

• Syntax

#id_value { style properties }

The CSS ID selector matches elements by ID name. In other words, it selects all elements of the given type within a document.

• Example

#div-container{
    color: blue;
    background-color: gray;
}

Group selector

This selector is used to style all comma separated elements with the same style.

• Syntax

element, element, element { style properties }

The CSS Group selector matches elements by each element, class and ID name. In other words, it selects all elements of the given type within a document.

• Example

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

Some of the most common CSS pseudo-elements are:

::after (can also be written as :after), ::before (can also be written as :before), ::marker, ::placeholder, ::first-letter.

And that’s pretty much it. 🙂

I hope this reference guide has been helpful for you!

Thanks to:- Hitesh Chaudhary