Little doubt on CSS priorities | SoloLearn: Learn to code for FREE!

0

Little doubt on CSS priorities

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

5/30/2020 12:09:24 PM

Aerys2

9 Answers

New 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

+5

Vincent Icardo Link your stuff here

+3

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.

+2

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!

+2

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

+1

Link ur code here qnd we see

+1

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

0

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

0

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 😁