CODEWITHSUNDEEP
css
Vikas V
Vikas V

Reputation: 3196

Overriding the CSS applied by "a" tag

I have below code,

<div id="nav">
   <a href="#" >Tab1</a>
   <a href="#" >Tab2</a>
   <a href="#" >Tab3</a>
   <a href="#" >Tab4</a>
   <a href="#" >Tab5</a>
   <a href="#" >Tab6</a>
   <a href="#" >Tab7</a>
   <a href="#" class="tab8Class">Tab8</a>
   <a href="#" >Tab9</a>
</div>

#nav a {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-colour: white;
}

.tab8Class {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: lightgray;
}

I want to apply a different background-colour for Tab8. So, for Tab8 alone I have added an extra class in the a href tag.

However, even for Tab8, #nav a is overriding all the attributes for tab8Class.

How can I make tab8Class to get applied?

Upvotes: 1

Views: 96

Answers (7)

Ian Wood
Ian Wood

Reputation: 6573

You have 2 options:

1) remove the class and use:

#nav a:nth-child(8){
    background-color: lightgray;
}

2) this is more backward compatible:

#nav .tab8Class{
    background-color: lightgray;
}

If you want to add a special hover effect (as assted in comments)

#nav .tab8Class:hover{
     //Do something
}

Upvotes: 1

Blender
Blender

Reputation: 298364

Make your selector even more specific:

#nav .tab8Class

You also remove the u in colour to have correct css:

background-color: white;
              ^

Upvotes: 3

Simone
Simone

Reputation: 21272

Use

#nav .tab8Class {

instead of:

.tab8Class {

This will make your selector more specific.

You can read about CSS specificity here.

Upvotes: 2

Sahil Popli
Sahil Popli

Reputation: 1993

Just change the bg color rule, no need to write all rules again.

#nav a.tab8Class{

    background: #000 ; // change the color 

}

specificity you need to read something about this.

Upvotes: 1

DSharper
DSharper

Reputation: 3217

Change your code like below 

#nav a.tab8Class {
    float: left;
    color: #004761;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    padding: 9px 5px 9px 13px;
    background-color: lightgray;
}

Upvotes: 1

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

You can simply do it with jquery. Please add jquery library.

$(document).ready(function(){
    $('#nav a:eq(7)').addClass('tab8Class');
});

Upvotes: -2

Sirko
Sirko

Reputation: 74076

You need to make the second rules more specific (for more info take a look ,e.g., at MDN on Specificity), so it does not get overridden by the first one. Additionally you don't have to repeat all unchanged properties:

#nav a {
   float: left;
   color: #004761;
   font-size: 12px;
   font-weight: bold;
   text-decoration: none;
   padding: 9px 5px 9px 13px;
   background-color: white;
}

#nav .tab8Class {
   background-color: lightgray;
}

Example Fiddle

There was a typo in the first rule as well: It said background-colour instead of background-color.

Upvotes: 5

Related Questions