Is it possible for two selectors targeting the same element to have the same specificity? If so, which styles “win” out?

Question

Is it possible for two selectors targeting the same element to have the same specificity? If so, which styles “win” out?

Answer

Yes it is possible to have two selectors of the same specificity targeting the same element. For example, say we have this HTML element with two class names applied: <h3 class= “callout title”> … </h3>

Now the following rules use different selectors with the same specificity to target the same h3 element:

.callout {
    color: green;
}
.title {
    color: blue;
}

So which rule gets applied to our <h3> element? According to the levels of precedence specified by the cascade, the selector furthest down in our style sheet will win out. Hence, our <h3> text would be colored blue in this example.

85 Likes

So, what is exactly the answer to this question? I did not get it.

2 Likes

i made all the code better readable, please read the answer again. Let me know if you have further questions.

11 Likes

He implies that the selector which is in the last position (i.e.)the most bottom one will be applied. In this case .title is at the most bottom, so text will be colored blue rather green. Hope you understood.

6 Likes

Yes, now that i applied the markup correctly, the post is readable, before, it wasn’t. Which is why farahadid didn’t understand it.

So yea, i assumed that now the post was readable, it would make sense, if not, i would have hard from farahadid.

2 Likes

I understood like this,

If you have studied language like C, you can imagine the same specificity in the way of altering variables. Among of those various codes of altering the value on a same variable, the last line changing the value of variable decides the value that the variable has in the end. Simply, It’s all about the order of command line.

4 Likes

so if i moved

.callout

below the

.title

then the color of h3 will change to green?

2 Likes

yes the color will change to green as explained by wuxi :slightly_smiling_face:

3 Likes

Taking the example at the beginning of the thread, what if the CSS remained the same, but the classes in the HTML were the other way around - title first, then callout.

Does it still go by the order off the stylesheet?

:thinking:

2 Likes

Yes. It still will receive the style specified by the last selector in order from top to bottom that refers to the html element specified. The order in which the class names appear in the element tag itself will make no difference. They still refer to the same element which receives the style. The classes aren’t styled, they just identify the element.

1 Like

Thanks! I thought that was probably the case, but thought it was still worth asking. :+1:

2 Likes

The operation priority is with lower “class” in CSS file.

it seems like that if you have two classes e.g

and css rules
.green{
color: green;
}
.blue{
color: blue
}
the last css rule .blue will win

1 Like

I read this MDN article about inheritance, cascade and specificity. However, when reading about specificity, I came across this table:




I don’t understand why h1 + p::first-letter has a specificity of 0003. I would have thought it would be 0002 as h1 and p are both tag selectors.


Same thing with li > a[href*="en-US"] > .inline-warning. I would have thought it would be 0012.

Can someone please explain why the selectors have the specificity that they do?

1 Like

first-letter has a specificity of 0001 as well.

this table might help:

https://dev.to/emmabostian/css-specificity-1kca

this shows that attribute selectors ([]) also have a specificity of 0010

you can also reason backwards, if h1 is 0001, and p is 0001, then first-letter must also be worth 0001 specificity

4 Likes

Hi @samyadel,

I would also recommend @stetim94’s post to get more insight into how to calculate and find the specificity levels. Once you have that understanding and you want to check your work, other tools like specificity calculators might help you out.

In this case, you have 2 elements, h1 and p (each with a value of 0001). Then you have the ::first-letter which is called a pseudo element which also has a value of 0001.

1 Like

Great! Thank you @realkennylin and @stetim94 for your explanations

1 Like

Hi -
I read the posts/links above, but I’m still confused.

I have some code using selectors that is not functioning as I would expect. In my code, the element appears to have greater specificity than class.

This code is for a navigation bar. It had inline styling in the .html. I decided to try and move the styling to the .css file, but when I added the style (float:right; ) to the class selector (.active), it didn’t overwrite the styling of the li (float:left;). I tried adding an id and !important to see if I could override the styling of the li, but nothing works. The only way I could get the same effect as what the HTML inline-styling was doing (moving About to the right) was to add an additional class (like .left) and labeling each of the other list items with that class. This code was written in Visual Code Studio and viewed in a Chrome browser. Can anyone explain why the li overrides the .active with regards to float? My code is below:

index.html

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a class="active" href="#about">About</a></li> 
   
  <!--  This section was to try out a class (.left) (and comment out li in .css) to see if I could get it to not pull the About to the right  ... that way the specificity of .active and .left were the same - it worked, functioning as expected. -->
<!--    <li><a class="left" href="#home">Home</a></li>
    <li><a class="left" href="#news">News</a></li>
    <li><a class="left" href="#contact">Contact</a></li>  
-->
<!-- This section was tried to see if an id would override the li - it didn't work -->
<!--   <li><a class="active" id="dothis" href="#about">About</a></li> -->
<!-- <li style="float:right"><a class="active" href="#about">About</a></li> -->     

style.css

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

/* make the nav bar inline, the words white and centered with padding */
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* changes the background color when you hover over an item */
li a:hover:not(.active) {
background-color: #111;
}

/* These sections were coded for testing
.left{
float: left;
}
#dothis{
float: right;
}*/

.active {
background-color: #4CAF50;
float: right;
}

Thanks,
Rebekah

this can’t be true. There must be a different cause

the .active class is on the anchor element (<a>), while the float: left is on the parent list elements. So there no conflicting css properties (so your problem has nothing to do with specificity). The anchor elements floats the right within the left floating list element.

if you apply the active class on the list element, you will see that the class has a higher specificity and as such the element will be positioned on the right

why wasn’t the "uppercase"selector removed in the style.css but it was removed in the index.html section??i noticed that it didn’t affect the code.