CSS Selectors, Types of CSS Selectors, Why not use IDs in CSS selectors, Problem using ID Selectors

To do styling and formatting to HTML we use Selectors in CSS.

CSS selectors:-

• Type selectors / Group Selectors
• Class selectors
• ID selectors

TYPE Selector/ Group Selectors

Type Selector are also called as GROUP Selector. It is easy to understand these selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree.

Example:-

h6 {color: blue; font-size:1em; }

Result:-

Example Result

Class Selector

Class Selectors are most easy and widely use to give formatting to HTML tags. unlike TYPE selectors it work on every HTML tag.

It can also use to override the formatting style of TYPE Selector.
Class Selectors are defined by DOT [ . ].

Example:-

.excerpt{ color:green }
h6{ color:red; }

Result:-

Example Result

ID selectors

ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute, regardless of their position in the document tree.

It can also use to override the formatting style of TYPE Selector.


Example:-

#excerpt{ color:green }
h6{ color:red; }

Result:-

Example Result

ID Selectors are defined by HASH [ # ].

The only difference between ID and Class selectors is we can define ID Selector once in whole HTML document as ID Selectors are unique in nature. But Class Selectors can use as many times on single HTML document we need.