Priority in CSS (id VS. type..) | Sololearn: Learn to code for FREE!

0

Priority in CSS (id VS. type..)

Hi, I saw that someone said 'id > class > type' and '!important' can change this order. But I feel confused when I run the code below: [html] <div id="why"> <p>first</p> </div> <p>second</p> [CSS] p{color: white; background-color: black;} #why{color: white; background-color: blue;} The results showed black 'first' and 'second'. I expected to see blue 'second' though. Also, I found that when I add <p class="ok">third</p> .ok{color: white; background-color: yellow;} it worked(yellow 'third'). (So I think this is because.. 'class' is directly included in <p> tag.) In short, I thought that as the <p> is included in the <div>, the <div>'s id will have more importance. Then could you explain me why this happens? Thanks

css

4/29/2020 12:52:05 PM

Hayden

1 Answer

New Answer

+2

Yes, you guessed almost right: priority is checked only in case of same element selected but with different selectors (if same priority later rule overide former rule)... https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity https://www.w3.org/wiki/Css/Training/Priority_level_of_selector