Newbie front-end here:

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:

Welcome to Peter's Penguins!

  <nav >
    <a href="index.html" >Home</a>
    <a href="about.html" >About Us</a>
    <a href="team.html" >Meet The Team</a>
    <a href="contact.html" >Contact Us</a>
    <a href="penguins.html" >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?

CodePudding user response：

You can do something like

a.nav-links: visited {

}

CodePudding user response：

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;
}