CODEWITHSUNDEEP
jqueryhtmlcss
Kyle Yeo
Kyle Yeo

Reputation: 2368

Selecting individual nav elements in CSS/CSS3

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.

Upvotes: 1

Views: 440

Answers (3)

skip405
skip405

Reputation: 6279

There is a CSS 2.1 solution to this :)

If you want to style your first link you may use nav a:first-child selector, for the second one and on you can use the sibling selectors like so:

nav a:first-child + a{
    color: red; //coloring the second link
}
nav a:first-child + a + a{
    color: green; //coloring the third link
}
nav a:first-child + a + a + a{
    color: black; //coloring the fourth link
}
nav a:first-child + a + a + a + a{
    color: yellow; //coloring the fifth link
}

Such a solution would work from IE7 up.

Upvotes: 1

Erik Philips
Erik Philips

Reputation: 54638

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).

Upvotes: 2

AlexC
AlexC

Reputation: 9661

check this one:

click here

do you want this ?

nav a:nth-child(2),
nav a:nth-child(4),
nav a:nth-child(6){

....something

}








nav a:nth-child(2)
{
background:#ff0000;
}

Upvotes: 5

Related Questions