Menu
Yesterday I ran into this: One of my :hover-states stopped working. I found out that If I change this:
div.item {}
div.item:hover {}
div.item:nth-child(even) {}
to this:
div.item {}
div.item:nth-child(even) {}
div.item:hover {}
it works again.
I've created a demo on jsfiddle to show both cases.
Can somebody explain, why the :hover-state is overwritten by the selector?
783
Values defined as Important will have the highest priority. Inline CSS has a higher priority than embedded and external CSS. So the final order is: Value defined as Important > Inline >id nesting > id > class nesting > class > tag nesting > tag.
popupbutton is the fastest.
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
Calculating a selector's specificity The priority level of the selector is decided in Point of combination of selectors. "article p span" are "a=0, b=0, c=0, d=3 (0003)". "#red" is "a=0, b=1, c=0, d=0 (0100)". In this instance, paragraph becomes a red character.
The selectors have the same specificity, so the one that comes last takes priority.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
