CODEWITHSUNDEEP
htmlcss
renata costa
renata costa

Reputation: 177

selected class not working - CSS

I have a pagination in my page.php. It is in PHP, so I tried to convert it to html. What I want is this page 2 be yellow (ffff00). class selectnav is not working:

Jsfiddle

html

<div id="nav">
<a href="/page/1">First</a>
<a href="/page/$anterior"><</a>
<a href="/page/1">1</a>

<a href="/page/2" class="selectnav">2</a>
<a href="/page/3">3</a>

<a href="/page/$posterior\">></a>
<a href="/page/$totalPagina\">last</a>

</div>

css

#nav a:link, #nav a:visited, #nav a:hover {
 text-decoration: none;
 border:1px solid #ddd;
 background-color:#fff;
 padding:3px;
 padding-left:6px;
 padding-right:6px;
 margin-right:5px;
}
#nav a:hover{
 background-color: #ff0000;
 color:#fff;
}
.selectnav{
 background-color: #ffff00;
}

why selectnav (page 2) is not yellow? thanks!

Upvotes: 0

Views: 142

Answers (1)

AmmarCSE
AmmarCSE

Reputation: 30557

The first style has a higher specificity. You can overcome this with giving the selectnav a higher specificity like

#nav a.selectnav{
 background-color: #ffff00;
}


#nav a:link,
#nav a:visited,
#nav a:hover {
  text-decoration: none;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 3px;
  padding-left: 6px;
  padding-right: 6px;
  margin-right: 5px;
}
#nav a:hover {
  background-color: #ff0000;
  color: #fff;
}
#nav a.selectnav {
  background-color: #ffff00;
}
<div id="nav">
  <a href="/page/1">First</a>
  <a href="/page/$anterior">
    <</a>
      <a href="/page/1">1</a>

      <a href="/page/2" class="selectnav">2</a>
      <a href="/page/3">3</a>

      <a href="/page/$posterior\">></a>
      <a href="/page/$totalPagina\">last</a>

</div>

Upvotes: 1

Related Questions