In case of multiple, conflicting style declarations on the an element, CSS Cascade is what determines which CSS rules actually get applied to that element.
One of the important factors that Cascade uses to determine what styles should ultimately be applied is called Specificity.
Specificity:
A more specific CSS declaration takes precedence over the less specific ones no matter where it is declared in the stylesheet.
Generally,
- An ID selector (
#id
) is always more specific than any number of class selectors (.class
) and a class selector is always more specific than any number of type selectors (e.g. h1
).
- When no declaration has a selector with a higher specificity, a larger amount of a single selectors will beat a smaller amount of that same selector (which is what is happening in your case).
Notice that .news a
is more specific because it contains a class selector as well as a type selector which is why it is preferred over .news-links
which only has one class selector.
In the following code snippet, I added another type selector with .news-links
to make it equally specific and now this style will be applied since it comes later in the stylesheet (as determined by Rule Order).
You can learn more about Specificity on MDN.
.news a {
text-decoration: underline;
}
li .news_links {
text-decoration: none;
}
.news_links:hover {
text-decoration: underline;
}
<div class="news">
<h2>Lorem ipsum</h2>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p><a href="xxx" target="blank">Individual Link</a></p>
<!-- **underline** -->
<ol>
<li><a class="news_links" href="xxx" target="blank">List Link</a></li>
<!-- **no-underline, but underline-hover** -->
</ol>
</div>