Question

How do i go about selecting nav elements in CSS3?

I want to be able to make a nav element – when hovered – change to a color i want.

Such as

<nav>
    <a href="#mainpage">first</a>  // i want to make this word, when hovered, into #555
    <a href="#secondpage">second</a>  // i want to make this word, when hovered, into #444
    <a href="#thirdpage">third</a>  //i want to make this word, when hovered, into #643312
    <a href="#fourthpage">fourth</a>  //i want to make this word, when hovered, into #444
    <a href="#fifthpage">fifth</a>  // i want to make this word, when hovered, into #666
</nav> 

How do i actually go about doing that?

I am reading about the CSS3 selectors but i don’t see any solutions (well at least not yet), so i’d thought i’ll get a faster answer here on Stack Overflow. I’ll continue searching to see if i yield any results.

Answer 1

Maybe you’re looking for when hovered: (not sure your question isn’t very descriptive)

nav a:nth-child(1):hover
{
    color: #555
}
nav a:nth-child(2):hover
{
    color: #444
}
nav a:nth-child(3):hover
{
    color: #643312
}
nav a:nth-child(4):hover
{
    color: #444
}
nav a:nth-child(5):hover
{
    color: #666
}

JsFiddle.net Example​

UPDATE

If you’re wondering how every N works:

<style>
nav a:nth-child(3n+0):hover {
  background-color: #f00;
}
nav a:nth-child(3n+1):hover {
  background-color: #0f0;
}
nav a:nth-child(3n+2):hover {
  background-color: #0f0;
}
<style>

<nav>
 <a href="#mainpage">first</a> 
 <a href="#secondpage">second</a> 
 <a href="#thirdpage">third</a>  
 <a href="#fourthpage">fourth</a> 
 <a href="#fifthpage">fifth</a>  
 <a href="#sixthpage">sixth</a>  
</nav> ​

JsFiddle.net Example

Elements (0, 3, 6, 9 etc) will be Green (#f00).

Elements (1, 4, 7, 10 etc) will be Blue (#0f0).

Elements (2, 5, 8, 11 etc) will be Red (#00f).