Introduction

Hello everyone! Hope you all are doing great. Today we are going to learn about the different ways we can select elements of HTML in CSS. So let's get started.

Universal selector

The universal selector is used to select every element in the HTML document, we can use universal selector in CSS as shown below

* {
    color: #FFFFFF;
}

The * is used to select every element in an HTML document and style it. Ok, why do we ever want to select every element of the HTML document? This universal selector is mostly used to remove the default margin and padding added by the browser, which can sometimes break the site.

Individual selector

The individual selector is used to select a particular tag in an HTML document and style it, we can use the individual selector in CSS as shown below

p {
    color: #FFFFFF;
}

Where p is the HTML tag we want to style. Similarly, we can style every tag in the HTML document.

Note: using individual selector styles every tag which is mentioned, in this case it will style every p tag.

class and ID selector

Most of the time, we do not want every element with the same tag to be styled the same, for that reason we use classes and ID's

Class selector

To easily understand classes and ID's, here's an analogy. Let's take a classroom full of students, here each student is an HTML element. Now, Class is the classroom. Many students are there in the classroom. In the same way, many elements can have one single class in HTML, let's take an example.

<div class="parent">
    <div class="one">One</div>
    <div class="one">Two</div>
    <div class="one">Three</div>
</div>

Here, the outer div tag has a class named "parent", and every div inside the outer div (or every child of the parent div) has a class named "one". Now let's style the elements which targets the class "one".

.one {
    color: #FFFFFF;
}

We use . (period) followed by the class name to style that specific class. If we use classes, the styling will only affect the elements which have this class specified in the HTML document.

ID selector

If we go with our classroom analogy, ID's are like roll number of the students, we use ID's to target one and only one element. We cannot target multiple elements using the same tag. Let's take an example,

<p id="demo"> Hello Wrold! </p>

In the HTML, we can use the id attribute to assign ID to a specific element.

Let's see how it works in CSS.

#demo {
    color: #FFFFFF;
}

We use a # (pound) sign followed by the ID's name to style the specific element.

If we tried to assign the same ID to two different elements, it will style both the elements. But this practice is not recommended.

Chained selector

To explain chained selectors, let's directly see the example.

<p class="demo world"> Hello Wrold! </p>
<p class="demo"> Hello World!! </p>
<p class="world"> Hello World!! </p>

In the above HTML, we have two p tags, the first one has two classes where the 2nd one has only one class. Now we have a task in our hand, we have to style the first p tag using classes. How do you do that?

In order to style the first element, we have to style the element which has both demo class AND world class in them. So how do we do it?

.demo.world {
    color: #FFFFFF;
}

The above code styles, the only element which has BOTH demo AND world class assigned to it. This is how the chained selector works.

Combined selector

We use combined selector to select multiple elements or classes or tags and style all of them in one block. Here's how it works,

.hello,
.world {
    color: #FFFFFF;
}

I hope you understood how to select HTML elements in different ways in CSS. Thank you for reading through!!