Little doubt on CSS priorities

Question

Hi,

I created a test for contradictions but the result is not what I expected. I understand the logic of priority based on the order in the code and that you have to be precise so it makes sense that selector b has the priority over selector class .contradiction but I dont get why when I add !important to the values of the last one, it does not work, it doesnt override the values of b.

I can't get why.

https://code.sololearn.com/Wr9SRdsqmo1N/?ref=app

Answer 1

If you reverse it and target .contradiction b it works

.contradiction b {
color: blue;
}

b {
color :green;
}

output:
Blue

.contradiction b {
color: blue;
}

b {
color :green !important;
}

Output:
Green

Answer 2

The priority depends on the element, the <b> tag is nested within the <p> tag and you have directly applied a css property to the <b> tag. so it won't look for the parent styling.. it's own property will override any styling it has got from the parent.

Answer 3

Sami Khan thanks, I see, it's good to know, I didnt find any mention about this in all css courses I've done. so it's finally one of these cases where the value inherit would be useful, I was trying to think of an example but it looks like I found it.

HNNX 🐿 Thank you, very helpful explanation!

Answer 4

Here what I understand , the text belong to b tag and p just work as wrapper thats a reason text has green color .. Correct me if im wrong

Answer 5

Link ur code here qnd we see

Answer 6

Hay Aerys2 inner the style property of innermost tag has more priority. Ok that's all

Answer 7

𝐊𝐢𝐢𝐛𝐨 𝐆𝐡𝐚𝐲𝐚𝐥 KATEREGGA ASHIRAF
https://code.sololearn.com/Wr9SRdsqmo1N/?ref=app
Here , sorry I was writting it after, didnt think Id get answers so fast 😂

Answer 8

I'm trying to figure it out myself - according to override documentation, this should work but it's not.

I also tried with ids and classes but I wasn't able to override it 😁