CODEWITHSUNDEEP
htmlcss
Propeller
Propeller

Reputation: 2533

How do I style all anchor tags inside a certain div?

I can't figure out how to properly do this. I have the following CSS:

#container > #main > #content > a {
    color: #3B7315;
}

I'm using that to supposedly style all <a> tags in the #content div. The problem is, however, it doesn't seem to style <a> tags inside divs or nested lists, etc. It only styles the top-most tags such as the following:

<div id="content">
     <a href="#">Lorem ipsum</a>
</div>

When I put the link inside another element, the styling is gone.

So how do I include the whole sub elements and make the style recursively apply itself from #content onwards? I think I'm looking for a wildcard value of sort?

Upvotes: 16

Views: 46595

Answers (4)

nexus_07
nexus_07

Reputation: 143

the symbol > is only applies to the direct child..that's why if you use that it would be only applied to the first child a of the element id content

Upvotes: 1

Milche Patern
Milche Patern

Reputation: 20452

#content a, #content a:link, #content a:visited {base style rules}
#content a:hover, #content a:visited:hover, #content a:active {over style rules}
#content a:focus {wai style rules}

Upvotes: 5

Eric Diviney
Eric Diviney

Reputation: 327

All that is necessary is the container and its anchors you are trying to style. The following should work fine, especially if that div you are using is an id, because then it wont be repeated onto other elements, as it would if you had a class on that div and other divs.

#content a{ style rules; }

Hope this helped!

Upvotes: 2

John Conde
John Conde

Reputation: 219824

You made it much more complicated than it needs to be:

#content a {}

Upvotes: 44

Related Questions