'Trying to target specific links for styling in CSS

I'm trying to target just the links in my nav bar as I have inserted other dummy links further down in my home page that I want to style on their own. I have tried adding an ID/class to the section that my header tags live in, and I have also tried targeting each individual with a class or ID attribute. This is lending itself to some functions being applied while others are not. This is purely a little practice site I am building alongside what I learn in my Udemy course, but I wanted real-time feedback. Here is the HTML I have right now:

<header id="nav-bar">
  <h1 class="welcome">Welcome to Peter's Penguins!</h1>

  <nav class="nav">
    <a href="index.html" class="nav-links">Home</a>
    <a href="about.html" class="nav-links">About Us</a>
    <a href="team.html" class="nav-links">Meet The Team</a>
    <a href="contact.html" class="nav-links">Contact Us</a>
    <a href="penguins.html" class="nav-links">Our Penguins</a>
  </nav>
</header>

and my (external) CSS is:

    .nav {
      font-family: sans-serif;
      font-weight: bold;
      text-decoration: none;
    }

    .nav-links {
      text-decoration: none;
      padding: 5px;
      margin: 23px;
    }

Is there a way I can use the pseudo-class property for my LVHA portions? I.e.

    .nav-links a:link {

    }


    .nav-links a:visited {

    }

Or is this improper syntax?

htmlcsssyntax


Solution 1:[1]

You can do something like

a.nav-links: visited {

}

Solution 2:[2]

This will target more specific (higher priority).

.nav .nav-links {
  color: blue;
}

Beloow wil give it a little bit more priority because it is more specific.

ul.nav a.nav-links {
  color: blue;
}

And you may use the :hover, :active, and other for functionality

.nav .nav-links:hover,
.nav .nav-links:active {
  color: red;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Moiz Sheikh
Solution 2 bron

Related Questions