We know styling is influential for developers to represent their work. Styling is as we add spices to vegetables to bring out the flavour of the vegetables. For styling "CSS selectors" are essential. So, what is CSS selectors? CSS selectors define the elements to which a set of CSS rules apply.

There are a few CSS selectors in CSS:-
1.Basic Selectors
2.Grouping Selectors
3.Combinators
4.Pseudo

Basic Selectors:-

Basic selectors are consist of universal, id, class, attribute and type selector.

Universal Selector:-

Universal selector is used to Selects all the elements on the pages.

Syntax

*

Html

Output

Id Selector:-

Id selector is used to selecting the id attribute of an HTML element. That is written with "#" symbol followed by the id of the element. There should be only one element with a given ID in a document.
Syntax

#idname

Html

Output

Class Selector:-

The class selector is used to selecting the class attribute of an HTML element. That is written with " ." symbol followed by the class of the element.

Syntax

.classname

Html

Output

Attribute Selector:-

Attribute selector is used to selects the HTML elements that have a specific attribute or attribute with a specified value.

Syntax

[attribute]/ [attribute=value]

Html

Output

Type Selector:-

Type selector is used to selecting the particular element type.

Syntax

elementname

Html

Output

Grouping Selector:-

Selector List:-

Selector list is used to apply the same styles on different elements by using a comma. It is used to minimize the code.

Syntax

A, B

Html

Output

Combinators:-

Combinators are consist of Descendant, Child, General sibling, Adjacent sibling and Column combinator.

Descendant Combinator:-

A descendant combinator(space) is used to select the child element of a particular tag at any level.

Syntax

A B
Html

Output

Child combinator:-

Child combinator(>) is used to select the first element of a particular tag. But if you wrap with different tag then it is not applied the style on it.
Syntax

A > B

Html

Output

Adjacent Sibling Combinator:-

Adjacent sibling combinator(+) is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the same parent.

Syntax

A + B

Html

Output

General Sibling Combinator:-

General sibling combinator(~) allows elements to be selected based on their sibling elements, those which share the same common parent. In this not necessary element immediately follow.

Syntax

A ~ B

Html

Output