CSS link styling priority

Question

I'm using CSS to style some of my link on my website I'm making for school, but I've ran into a problem. One bit is styled with CSS so its can be used as navigation menu. The other links are regular links with some styling. The navigation menu has to be in the div tag for the regular link styling too, otherwise the background will not cover the whole page.

The problem is, since the div of the nav menu is placed within the styling of the other links, the effect of both styles get applied to the navigation menu.

Is there a way to give the styling of the navigation menu a higher priority than those of the other links, so that only the styling of the navigation menu will be applied?

Here's the CSS of the navigation menu:

    /* styling voor navigation menu */

.nav ul {
    list-style: none;
    background-color: #525252;
    text-align: center;
    padding: 0;
    margin-left: 400;
    margin-right: 400;
    border-radius: 10px;
    border: 1px solid black ;
    color: #fff;
    }

.nav li {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 30px;
    height: 30px;
}

.nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
}

.nav a:hover {
    background-color: #404040;
}

.nav a.active {
    background-color: #404040;
    color: #fff;
    cursor: default;
}

.nav li {
    width: 110px;
    height: 40px;
    line-height: 40px;
    font-size: 1.2em;
  }

.nav li {
    display: inline-block;
    margin-right: -4px;
  }

    /* extra class voor meescrollen menubalk */

 .main-nav-scrolled {
    position: fixed;
    top: 0;
    z-index: 9;
    text-align: center;
    width: 41%;
    background: #858585
    }

here's the CSS of the other links:

/* links voor onderste gedeelte pagina */

.bottom a:link {
    text-decoration: none;
    color: inherit;
}

.bottom a:visited {
    text-decoration: none;
    color: inherit;
}

.bottom a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s;
}

.bottom a:hover {
    color: inherit;
    border-color: inherit;
}

And here is the important bit of HTML:

    <div class="bottom">
    <!-- navigation balk bovenin pagina -->
    <div class="nav">
        <ul>
        <li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
        <li class="Types"><a href="Over ons.html">Types</a></li>
        <li class="Abilities"><a href="Sponsoren.html">Abilities</a></li>
        <li class="Natures"><a href="Kleding.html">Natures</a></li>
        <li class="Stats"><a href="Vacaturen.html">Stats</a></li>
        </ul>
    </div>

<?php
echo " <span style='color:$color'><a href='SQLdetailtypendb.php?id=" . $data['type_id'] . "'>" . $type1 . '</span></a>';    
?>
    </div>

Thanks in advance! -Gijs

Answer 1

if you add styles to .bottom a that are not given to .bottom .nav a like background: green it will become a style to .bottom .nav a also. All styles need to be overwritten if you want custom styles only for .bottom .nav a

because .nav a is a descendant of .bottom , even if you write a very specific path eg .bottom .nav ul li a , it will inherit from .bottom a the styles that are 'unique'

for example

1. snippet not good for you ( .nav li a inheriting background: green style from .bottom a because it doesn't have a background style for its self )

.bottom .nav a:hover { color:red;}
.bottom a:hover { color:yellow;background:green}

<div class="bottom">
    <!-- navigation balk bovenin pagina -->
    <div class="nav">
        <ul>
        <li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
        <li class="Types"><a href="Over ons.html">Types</a></li>
        <li class="Abilities"><a href="Sponsoren.html">Abilities</a></li>
        <li class="Natures"><a href="Kleding.html">Natures</a></li>
        <li class="Stats"><a href="Vacaturen.html">Stats</a></li>
        </ul>
    </div>
</div>

2. snippet good ( disable background:green from .bottom a by adding background:none or background: anythinghere image or color etc. for .bottom .nav li a )

.bottom .nav a:hover { color:red;background:black}
.bottom a:hover { color:yellow;background:green}

<div class="bottom">
    <!-- navigation balk bovenin pagina -->
    <div class="nav">
        <ul>
        <li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
        <li class="Types"><a href="Over ons.html">Types</a></li>
        <li class="Abilities"><a href="Sponsoren.html">Abilities</a></li>
        <li class="Natures"><a href="Kleding.html">Natures</a></li>
        <li class="Stats"><a href="Vacaturen.html">Stats</a></li>
        </ul>
    </div>
</div>

Answer 2

So what you're going to want to do first is add a new class to all the links in your nav, for example:

<li class="Types"><a class="new-class-here" href="Over ons.html">Types</a></li>

Then in your css for the nav you will use .nav a.new-class-here instead of .nav a, .nav a.new-class-here:hover instead of .nav a:hover, and so forth.

Then in your css for the other regular links you will want to use .bottom a:not(.new-class-here) instead of .bottom a. What this does is selects all the links in .bottom that do not have that new class we created. So now your nav styles will only apply to your nav links and your regular styles will only apply to the non-nav links.

You can learn more about :not() here if you want: https://developer.mozilla.org/en-US/docs/Web/CSS/:not