css - two different links styles in one container-CodePudding

I want to assign two different link styles to a div-container. Individual links in the text should be underlined. The links in the list should not be underlined, only when the link is hovered. Unfortunately, that doesn't work because the second declaration is ignored.

<div >
<h2>Lorem ipsum</h2>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p><a href="xxx" target="blank"></a></p> **underline**
<ol>
<li><a  href="xxx" target="blank"></a></li> **no-underline, but underline-hover**
</ol>
</div>

.news a {
text-decoration: underline;
}

.news_links {
text-decoration: none;
}

.news_links:hover {
text-decoration: underline;
}

CodePudding user response：

It's a bit of specificity problem. Anyways, you can fix you particular problem by using this syntax instead:

.news a {
text-decoration: underline;
}

.news li a {
text-decoration: none;
}

.news_links:hover {
text-decoration: underline;
}

    <div >
      <h2>Lorem ipsum</h2>
      <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
      <p><a href="xxx" target="blank">Link 1</a></p> 
      <ol>
        <li><a  href="xxx" target="blank">Link 2</a></li>
      </ol>
    </div>

In this code, the second line you're targeting the links inside lists inside the news class. In your code .news a is more specific than .news_links, therefore it will override it, regardless of the second one coming later in the CSS.

You can use this website to better elucidate you about specificity: https://specificity.keegan.st/

Hope I've helped you. Firm handshakes.

CodePudding user response：

Just add two more selectors, so that the .news a can be overwritten. Also if you keep the class .news in front of the definition, you prevent it from being active outside the div.news.

.news a {
  text-decoration: underline;
}

.news a.news_links {
  text-decoration: none;
}

.news a.news_links:hover {
  text-decoration: underline;
}

<div >
  <h2>Lorem ipsum</h2>
  <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
  <p>
    <a href="#" target="blank">Link underlined</a>
  </p>
  <ol>
    <li>
      <a  href="#" target="blank">Link not underlined</a>
    </li>
  </ol>
</div>

CodePudding user response：

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 >
  <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  href="xxx" target="blank">List Link</a></li>
    <!-- **no-underline, but underline-hover** -->
  </ol>
</div>