Class Selector

Hello,

We came to class selectors, one of the most critical issues in CSS.

We know the class selector because we have used the class selector frequently until now.

In this lesson, let's both consolidate our knowledge and learn about its advantages over other selectors.

So let's start.

We use the dot (.) selector to define a class type selector. Below is a class selector named my-class and the font-size style is 10px; has been passed.

.my-class {

font-size: 10px;

}

We can also define more than one style for a class selector.

.my-class {

font-size: 10px;

}

We can assign more than one class to the same element. 

In the example below, two-class selectors named el1 and el2 are defined.

Two or more classes can be added to the class attribute of the element created with the p tag, leaving a space between them.

You can see that the styles from the two classes are reflected in the element at the same time in the preview section.

<style>
.el1{
     color:red;
}
.el2{
     font-size:30px;
}
</style>

<p class="el1 el2">
     Hello Class Selector
</p>

So why should we choose the class selector over the tag and id selector?

When we use the tag selector, it can lead to unwanted results because it affects all the elements created with this tag. Therefore, we usually use these tags if there is a common feature that all elements should have.

For example, if we want each font family of an element to be 'Lato' we make a definition as follows.

a{
   font-family:  Lato,sans-serif
}

We could make an element-specific definition with the id selector.

However, since all our style definitions are valid for only one element, we had to rewrite the codes for another element that we wanted to show the same properties

Because there can only be one element in an HTML document with the same id.

CSS Specificity

Now let's learn the concept of CSS Specificity.

Let's create a problem again to understand the subject better, and we will learn this concept while solving this problem.

In the example below,

A style definition has been made for the p tag.

A style definition is made with a class selector named .first.

Both selectors chose the same element in our HTML document

Both selectors have defined styles to replace the same color property. In this case, there will be a conflict.

<style>
.first{
   color:blue;
}

p{
   color:red;
}
</style>

<p class="first">
Enroll Now And Start Learn Codding?
</p>

When we look at the example, we can think that the color will be red based on our previous knowledge.

Because the concept of cascade tells us that the last place in the code order will win.

However, there is a small nuance. If they have the same specificity, the last incoming code wins.

It is an evaluation that shows the importance of the specificity selector on the relevant element or elements.

Regardless of its rank in the code with high specificity rank, it will be evaluated by the browser.

The class selector is a more specific definition than the element selector. Therefore, the Specificity rank is higher.

Finding out which selector is more specific is actually very simple.

Since there is only 1 ID assigned to an element and there is only 1 on the web page, we expect it to be the top priority selector.

Class selectors, on the other hand, can be evaluated more specifically than tag selectors because they choose a more specific group than the tag.

We will see that the id selector wins in the example below by selecting the same element with 3 different selectors.

<style>
   #first{
   color:green;
   }
   .first{
   color:blue;
   }
   p{
   color:red;
   }
</style>
<p class="first" id="first">
   Enroll Now And Start Learn Codding?
</p>

You can access the online Specificity calculator from this link.

So do I have to use these calculations all the time?

Of course not. Conflicts will not occur when we write our codes according to the standards.

So you don't have to do mathematical calculations all the time, but when there is a problem, you may need this information to solve the problem.

Congratulations. 🥳🥳🥳

You have finished the Class Selector and CSS Specificity lesson.

In the next section, we will learn the Selector Types.

You can click to continue in the next section.