Inheritance and Specificity within the Cascade

add a specific reference to child element

[bluecorr]

I've got

<div id="main">

<div id="otherdiv">
</div>

</div>

I want the UL in main to display a custom bullet image while the UL in otherdiv to display no image. I've used

#main ul {
list-style-image: url(image);
}

and

#otherdiv ul {
list-style-image: none;
}

Needless to say that didn't work. I tried making a special class for otherdiv e.g <ul class="special"> but that didn't work either.

Am I missing something?

Thanks

[DrDoc]

#main ul {
list-style-image: url(image);
}

and

#otherdiv ul {
list-style-image: none;
}

That's exactly what you should do too. So, the problem must be related to something else. When you say that "it doesn't work" -- what exactly is it that doesn't work, and how does it work instead?

[SuzyUK]

As Doc says that is the correct way..

but it's possibly specificity in the cascade..

have you got the {#otherdiv ul} appearing first in the CSS? if so {#main ul} would then be overriding it, by being later in the cascade. All ul's inside the main div, including the ones inside nested elements, are targeted by {#main ul}.

you could either move it in the CSS or (and more correctly) target it very specifically
#main #otherdiv ul
therefore no room for confusion no mattter where it appears in the cascade

if that's not it then post more

Suzy

[bluecorr]

SuzyUK I could kiss you right now. It worked :). Previously, both UL displayed the image regardless of the references I mentioned.

Thanks again

[bluecorr]

Ok I've got another inheritance problem.

I've got in some pages

<div id="news">

<h2><a href="page.html">Title</a></h2>
<q>.....</q>

</div>

In others I have

<q><a href="page.html">Text text</a></q>

The effect I'm trying to achieve:

- on hover, the link within H2 should get a grey background like this

h2 a:hover {
background: #F0F0F0;
}

- on hover, the link within Q should get a grey background AND an image (rollover).

I tried using

q a:hover {
background: url(image) no-repeat #F0F0F0 bottom left;
}

The effect: both H2 and Q get a grey background on rollover but the link within Q doesn't get a background.

I've even tried setting all links in "news" to get a background (which does the trick) except for links in H2 for which I used

#news h2 a:hover {
background-image: none;
}

Unfortunately the H2 still gets a background image on rollover. I may not be understanding inheritance properly?

Thanks

[SuzyUK]

I may not be understanding inheritance properly?

I'm sure you're understanding fine but specificity is a different beast sometimes, and then we have shorthand properties as well! :)

this one is puzzling me.. but here goes

Questions:
1. re: the links inside the <q>, Are the <q>'s still inside <div id="news">?
2. have you set "general/any other" background properties for ordinary links (i.e. a {rules})?
3. you say that the effect is a grey background within <h2> and <q>, but that <q> doesn't get a background?.. do you mean that that the <q> gets a grey background color without an background image?

Shorthand properties are coming into this somehwere I think.. {background: rules;} overrides all other previously specified (longhand or otherwise) rules and inheritance/specificity can be overriden by a shorthand rule..

sorry if that's not making sense.. perhaps if you post all your CSS relating to links ...

Suzy

[bluecorr]

Ok I finally managed to fix it. What happened is that the links had a general rule

a:hover {
background: #F0F0F0;
}

However, I thought this should not ovveride

q a:hover {
display: block;
background: url(image) no-repeat #F0F0F0 5px bottom;
}

Once I removed that, it worked fine. specificity is a beast, you're right. I'll answer your questions anyway, maybe someone encounters the same situation.

Questions:
1. re: the links inside the <q>, Are the <q>'s still inside <div id="news">?
Yes
2. have you set "general/any other" background properties for ordinary links (i.e. a {rules})?
Yes, see above a:hover
3. you say that the effect is a grey background within <h2> and <q>, but that <q> doesn't get a background?.. do you mean that that the <q> gets a grey background color without an background image?
Yes

Shorthand properties are coming into this somehwere I think.. {background: rules;} overrides all other previously specified (longhand or otherwise) rules and inheritance/specificity can be overriden by a shorthand rule.

This is something worth keeping in mind.

Thanks

[SuzyUK]

Hi bluecorr, glad you got it fixed..

this could've been a "two-pronged" issue..

First, and the one I think it was, if the general rule {a:hover} appeared after {q a:hover} in the Cascade it will override in the same way described in your first problem.

the second thing I thought it could've been related to:

a:hover {background: #f0f0f0;} is actually the equivalent of:

a:hover {
background-color: #f0f0f0;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}

if you then set q a:hover (I know you didn't, but this where a different override could've come into it.) to
q a:hover {background: url(image) no-repeat bottom right;}

equivalent
q a:hover {
background-color: transparent;
background-image: image;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 100% 100%;
}

the background-color would've been overriden in this case because be not respecifying it, it defaults to transparent. That's why I wondered what other link CSS was involved.

So your

q a:hover

should've worked regardless of what div it was in, provided it appeared later in the cascade than the more general rules.

There would only be a need to make it more specific: e.g.

#news q a:hover

if there were a less specific

q a:hover

rule that needed to be different and if that were the case

q a:hover

should appear first in the cascade..

a:hover {}
q a:hover {}
#news q a:hover {}

So in this case it's not's specificity it's the cascade.

As a habit, I put any general <a>, <p>, <hx> rules second (below body & html) in my stylesheet so the "stage is set" so to speak.

Thanks for sharing your findings.

Suzy