CODEWITHSUNDEEP
csshtml
Dillon
Dillon

Reputation: 51

CSS Style Individual <div=id

I have a ccs sheet with the usual tags a. {} a.hover {}

I also have a div=id "footer" that I want to change the font style but the global a. and a.hover are overriding it even when I add a 

#footer{
    color: #333333
}

Can I override using this or do I need to try? a.#footer or a.hover:#footer

Basically the #footer as is wont work because of the a. mentioned above even though the other elements are working in the #footer div such as margin...just the font color and hover??

Can someone tell me how to style this and not let the global a. interfere with it?

Many thanks

Upvotes: 0

Views: 1937

Answers (5)

Onkel Toob
Onkel Toob

Reputation: 2212

This is a matter of specificity. Styling the <a> elements directly is more specific then just applying some CSS to the <div id="footer"> element and all of its children. You can target any links within your footer by using

#footer a {
    color: #333;
}

Due to the descendant selector this rule itself is more specific than the one you're using for all the other <a> elements outside of the footer.

Upvotes: 0

Blowfish
Blowfish

Reputation: 130

If you are nesting a inside div element you need to use

#footer a {
    color: #333333;
}

If you only use #footer {} it will apply the styles to div and a won't inherit the color, so you can also write

#footer {
   color: #f00;
}

#footer a {
   color: inherit;
}

Upvotes: 0

markvicencio
markvicencio

Reputation: 146

It's all about the hierarchy of code:

HTML:

<div>
    <a href="#">Sample link</a>
    <div id="footer">
        <a href="#">Footer link</a>
    </div>
</div>

CSS:

a {
    color: #ebebeb;
}

a:hover {
    color: #000;
}

#footer a {
    color: #3e3e3e;
}

#footer a:hover {
    color: #609;
}

Upvotes: 3

Chamara Keragala
Chamara Keragala

Reputation: 5777

Try this piece of code

#footer a,
#footer a:hover{
 color:#333;
}

Upvotes: 1

alireza
alireza

Reputation: 507

what is dot after a ? the correct form is a {} , a:hover {} , a#footer and a:hover #footer

Upvotes: 0

Related Questions