CODEWITHSUNDEEP
htmlcss
niklasdude
niklasdude

Reputation: 43

Identifly list item for css usage?

see, i build my own website using just html and css. I'm figuring out most things on my own but i can't find a way to solve this problem, i guess because of my limited knowledge. I have this simple list: 

<ul class="nav">  
  <li><a href="#">HOME</a></li>
  <li><a href="#">GALLERY</a></li>
  <li><a href="maps.html">PARKING</a></li>
  <li><a href="#">DOGS</a></li>
  <li><a href="#">ABOUT</a></li>  
</ul>

I now want to change the appearance of the third item when it is clicked, therefore i somehow need to identify it, so i can stylize it like below:

.nav > li > a {
text-decoration:none;
font-size: 20px;
color: #ffffff;
}

Like in this example above, i want to stylize the appearance, but not for all items, just for one. Can you help me out? Sorry if i wasn't clear enough..

Upvotes: 1

Views: 43

Answers (2)

j08691
j08691

Reputation: 207973

You can use the :nth-child pseudo-class with the :active pseudo-class to target the third list item link:

.nav > li:nth-child(3):active > a {
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
}
<ul class="nav">
  <li><a href="#">HOME</a>
  </li>
  <li><a href="#">GALLERY</a>
  </li>
  <li><a href="maps.html">PARKING</a>
  </li>
  <li><a href="#">DOGS</a>
  </li>
  <li><a href="#">ABOUT</a>
  </li>
</ul>

Upvotes: 1

Bill Criswell
Bill Criswell

Reputation: 32941

I'd add a class to it and style based on that. No reason to get super specific with selectors here.

<li><a href="maps.html" class="parking">Parking</a></li>

Then in your CSS you can do:

.parking:active {
  ...
}

Upvotes: 4

Related Questions