CODEWITHSUNDEEP
css
jerrygarciuh
jerrygarciuh

Reputation: 21988

Styling a link based on class of enclosing DIV

I though I knew the syntax for this but I am stymied.

I read CSS a href styling and thought I got it right.

For to style these links:

<div id="anchorbox">
  <div class="anchors">
    <a href="#fre">FREE PEOPLE of COLOR</a><br />
    <a href="#sur">SURVEYORS’ MEASURE</a>
  </div>
</div>

I have tried 

.anchors a:link, .anchors a:active, .anchors a:visted, .anchors a:hover {
  text-decoration:none !important;
}

and I have tried 

DIV.anchors a:link, DIV.anchors a:active, DIV.anchors a:visted, DIV.anchors a:hover{
  text-decoration:none !important;
}

but neither worked.

What is the correct syntax?

Upvotes: 0

Views: 234

Answers (4)

user164226
user164226

Reputation:

Your styling should work; I tested exactly, and only, what you supplied and it styled correctly. This means that your problem is likely not in the cascade, but in specificity. Some other styling is being applied because its case is more specific than the one above.

Try: div#anchorbox div.anchors a:(state){...} and see if the added specificity resolves the issue; if it does, you can refactor back into abstraction.

Upvotes: 1

breezy
breezy

Reputation: 1918

They need to go in a specific order and you misspelled a:visited wrong.

The reason why is to have consistency through all major browsers and specificity reasons as well - reference

Try this

.anchors a:link, .anchors a:visited, .anchors a:hover, .anchors a:active  {
  text-decoration:none !important;
}

or as how @Amir Raminfar suggested

.anchors a {property:value }

Upvotes: 1

Kon
Kon

Reputation: 27441

Seems ok, just remove the :link part from a:link.

Upvotes: 1

Amir Raminfar
Amir Raminfar

Reputation: 34149

.anchors a {
...
}

Should work. I think you have the problem because the order of active, visited and hover matters.

I got it working here also http://jsfiddle.net/BZETE/

Upvotes: 3

Related Questions