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


#1

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.


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Specificity
#2

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


#3

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


#4

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.


#5

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.