CODEWITHSUNDEEP
htmlcss
Saorikido
Saorikido

Reputation: 2280

CSS doesn't work properly with HTML tag a

HTML code:

<div class='abc'>
    <a>test1</a>
    <a class='active'>test2</a>
</div>

CSS code:

.abc a { color: red; }
.active { color: green; }

Result: DEMO

Question:

As you can see, all tag A appear red color, class '.active' doesn't take effect, what caused this result and how to solve it?

Thanks.

Upvotes: 1

Views: 118

Answers (6)

emerino
emerino

Reputation: 1120

The problem is because of specifity (like the other answers pointed out). Another way to force this would be to add !important at the end of the style:

.active { color: green !important; }

Not the most elegant solution (actually discouraged), but may work in scenarios where coding all of the specifity scenarios would involve too much work (e.g. changing the color of all elements with class active in response to an alert). More information: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Upvotes: 0

May11
May11

Reputation: 155

Try:

.abc a{color: red}
a.active{color:green}

To override a property...

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you will need to this

Js fiddle 

  .abc a{color: red}

  a.active{color:green}

Upvotes: 0

D.P.
D.P.

Reputation: 11

".abc a" takes precedence over ".active" What you are looking for is: .abc .active

Upvotes: 0

Quentin
Quentin

Reputation: 943166

.abc a consists of a class selector and a type selector.

.active consists of only a class selector.

This means .abc a is more specific. Since they both match the same element and set the same property, the more specific one wins.

Make the rule you want to apply more specific: .abc a.active.

Upvotes: 10

Teknotica
Teknotica

Reputation: 1136

Try:

.abc a{color: red}
.abc .active{color:green}

The reason it's not working is because your first line of CSS is more specific than just .active and will always take priority. The more specific the more priority will have.

Upvotes: 2

Related Questions