CSS Selectors :

A CSS selector is the most important 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 and apply to. Just like Photoshop there we use Selector tool to perform any specific action on selected area (" Brush and applying Exposure , Contrast , Saturation setting to that selected area" )

Types of Selectors

Universal

CSS Syntax:

* { }

Description : It Select all elements in a Page regardless what Tag and Attribute is used inside HTML.

Let's Understand by an Example :

Type Selector :

CSS Syntax :

div { } p { } h1 { } span { } Description :

Select elements of that type , you use tag name such as p , h1 , span to select an subject. Let's Understand by an Example :* In this example attributes are only applied to p and h1 tag neither on the whole page.

Class Selector

CSS Syntax : .cls .re-bg

Description : Select elements with that class name .

Let's Understand by an Example : In this example all the attribute are applied to the class centre , as centre class was selected.

ID Selector

CSS Syntax: re-bg

Description : Select elements with that ID name , ID is different from classes it should be unique in order to be valid for each time .

Let's Understand by an Example :

Combination

1. Descendant

CSS Syntax : div p

Description : Select elements that are descendants of the first element.

Let's Understand by an Example :

2. Direct Child

CSS Syntax : div > p

Description : Select elements that are direct children of the first element.

Let's Understand by an Example :

3. General Sibling

CSS Syntax : div ~ a

Description : Select elements that are siblings of the first element and come after the first element.

Let's Understand by an Example :

4. Adjacent Sibling

CSS Syntax : `div + p

Description : Select elements that are siblings of the first element and come directly after the first element.

Let's Understand by an Example :

5. Or

CSS Syntax : `div, a

Description : Select elements that match any selector in the list.

Let's Understand by an Example :

6. And

CSS Syntax : div.c

Description : Select elements that match all the selector combinations.

Let's Understand by an Example :

Pseudo Class

A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states. For Example, changing the style of an element when the user hovers over it, or when a link is visited. All of these can be done using Pseudo Classes in CSS.

Some of Pseudo Classes

:active
:focus
:focus-visible
:focus-within

Pseudo Element

Discription: A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element Insert content before, or after, the content of an element

Some Examples of Pseudo elements

 a:first-child
 a:last-child
a:nth-child(2n)
a:nth-last-child(3)
a:only-child
a:first-of-type
a:last-of-type
a:nth-of-type(2n)
a:nth-last-of-type(2)