1. Element Selector

An element selector selects all HTML elements with a particular tag name.

p { color: blue; }

Here, all <p> elements will have blue text.

2. ID Selector

An ID selector is used to select an element with a specific ID. In CSS, we use the # symbol before the ID name.

HTML:

<h1 id="title">Welcome</h1>

CSS:

#title { color: red; }

Here, the heading with the ID title will have red text.

An ID should be unique within a webpage.

3. Class Selector

A class selector is used to select elements with a particular class name. In CSS, we use the . symbol before the class name.

HTML:

<p class="message">Hello World!</p> <p class="message">Welcome to CSS!</p>

CSS:

.message { color: green; }

Both paragraphs will have green text.

We can use the same class on multiple HTML elements.

4. Universal Selector

The universal selector selects all elements on a webpage. It uses the * symbol.

* { margin: 0; padding: 0; }

This removes the default margin and padding from all elements.

5. Group Selector

A group selector allows us to apply the same styles to multiple selectors.

h1, h2, p { color: purple; }

Here, all <h1>, <h2>, and <p> elements will have purple text.

This helps us avoid writing the same CSS rules separately.

6. Descendant Selector

A descendant selector selects elements that are inside another element, at any level.

HTML:

<div> <p>This paragraph is inside the div.</p> </div>

CSS:

div p { color: orange; }

Here, paragraphs inside the <div> will have orange text.

7. Pseudo-class Selector

Pseudo-classes are used to style elements in a particular state.

For example, :hover applies styles when the mouse pointer moves over an element.

button:hover { background-color: blue; color: white; }

Here, the button's background becomes blue when the pointer hovers over it.