CSS Selectors and its Different Types

What are CSS Selectors

CSS selectors are used to select the elements on a web page on which you want to apply the CSS styles. There are five types of selectors and they are:

• Element Selector
• Class Selector
• ID Selector
• Attribute Selector
• Universal Selector

Let's discuss each selector in detail with examples.

Element Selector

Element selectors target specific HTML elements using their tag name to apply styles. For example:

<p>we are learning about element selector in CSS.</p>

p {
    color: red;
}

In the above example, p is an element selector, that targets all the paragraph tags on a web page and apply red color to it.

Class Selector

Class selectors target HTML elements using their specific class name to apply styles. For example:

<p class="info">This is 1st paragraph.</p>
<p class="info">This is 2nd paragraph.</p>
<p class="data">This is 3rd paragraph.</p>
<p class="data">This is 4th paragraph.</p>

.info {
    color: blue;
}

.data {
    color: green;
}

We created four paragraphs in which, the first two paragraph's class name is info and the last two paragraph's class name is data. In CSS, we target the first two paragraphs using their class name info to change their text color to blue and the next two paragraph using their class name data to change their text color to green.

Note: In CSS a dot (.) in front of a name states that it is a Class selector. In the above example, .info and .data are class selectors.

ID Selector

ID selectors target HTML elements using their specific ID name to apply styles. For example:

<p id="#para1">This is 1st paragraph.</p>
<p id="#para2">This is 2nd paragraph.</p>

#para1 {
    color: red;
}

#para2 {
    color: orange;
}

We created 2 paragraphs in which, the first paragraph id name is para1 and second paragraph id name is para2. In CSS, we target the first paragraph using its id name para to change the text color to red and the next paragraph using its id name para2 to change the text color to orange.

Note: In CSS a hash tag (#) in front of a name states that it is an ID selector. In the above example, #para1 and #para2 are ID selectors.

Attribute Selector

Attribute selectors target HTML elements based on their attributes to apply styles. In CSS you can select an HTML element using its attribute as tag name[attribute="value"]. For example:

<input type="text">

input[type="text"] {
    background-color: yellow;
}

In the above example, we change the background color of a text box to yellow using its attribute as input[type="text"]. Here input is a tag name, type is an attribute and "text" is a value.

Universal Selector

Universal selectors (denoted by *) target all elements on a web page to apply styles. For example:

<p>Name of 4 Countries.</p>
<ol>
	<li>India</li>
	<li>USA</li>
	<li>Australia</li>
	<li>Canada</li>
</ol>

* {
    color: blue;
}

In the above example, the universal selector * selects all the HTML elements and change their text color to blue.