[SOLVED (but possibly interesting)] CSS and specificity issue

104 Posts

scraf Reply #1, 19 years, 7 months ago

( help )

I’ve been doing this rounded corner thing, but it’s not behaving, and I don’t know why.

This is the result I want...
http://scraf.nl/examples/css/specificity/one.php

Full code...

<style type="text/css">
h3{ display: block; background: #000; color: #FFF; margin: 0; padding: 0 0 0 10px; }
span{ display: block; height: 1px; overflow: hidden; background: #000; }
span.indent50{margin: 0 0 0 5px}
span.indent30{margin: 0 0 0 3px}
span.indent20{margin: 0 0 0 2px}
span.indent10{margin: 0 0 0 1px;height: 2px}
</style>

<div id="headcase">
  <span class="indent50"></span>
  <span class="indent30"></span>
  <span class="indent20"></span>
  <span class="indent10"></span>
<h3>Here is a header</h3>
</div>

However, I want to limit applying the general attributes for the spans to within the particular div, as in.....

div#headcase span{ display: block; height: 1px; overflow: hidden; background: #000; }

... but that gives me this result sad

http://scraf.nl/examples/css/specificity/two.php

Probably a lack of basic understanding of css here, comments, fixes, or workarounds greatly appreciated.

3,975 Posts

Zaigham (aka zi) Reply #2, 19 years, 7 months ago

h3{ display: block; background: #000; color: #FFF; margin: 0; padding: 0 0 0 10px; }
div#headcase span{ display: block; height: 1px; overflow: hidden; background: #000; }
div#headcase span.indent50{margin: 0 0 0 5px}
div#headcase span.indent30{margin: 0 0 0 3px}
div#headcase span.indent20{margin: 0 0 0 2px}
div#headcase span.indent10{margin: 0 0 0 1px;height: 2px}

:)

Zaigham R - MODX Professional | Skype | Email | Twitter

Digging the interwebs for #MODX gems and bringing it to you. modx.link

104 Posts

scraf Reply #3, 19 years, 7 months ago

Thanks Zi, that worked a treat, I’m not completely sure why, but it worked perfectly.

:)

3,975 Posts

Zaigham (aka zi) Reply #4, 19 years, 7 months ago

Quote from: scraf at Feb 08, 2007, 04:58 AM

Thanks Zi, that worked a treat, I’m not completely sure why, but it worked perfectly.

:)

Actually if you want to apply/restrict a particular element in your html markup, you need to point a path to it, for example:

span{ display: block; height: 1px; overflow: hidden; background: #000; }

will be applied to all <span></span>, anywhere in your html page, but if you want to target ONLY a span inside a specific div e.g.

<div id="main"><span></span></div>

you need this:

#main span {...style goes here...}

Hope it helps

.

regards.

Zaigham R - MODX Professional | Skype | Email | Twitter

Digging the interwebs for #MODX gems and bringing it to you. modx.link

104 Posts

scraf Reply #5, 19 years, 7 months ago

I’ve eventually seen the light Zi, but had to document it along the way understand it fully.

My problem had to do with specific id’s over-riding general classes, for example....

Here the outcome is green, because the "block class" over-rides the general span attribute.
http://scraf.nl/examples/css/specificity/three.php

span{background: red; }
span.block{background: green;}

<div id="headcase">
  <span class="block"></span>
</div>

Next, however, the outcome is red because the "block class" is overriden by the specific div#headcase attribute
http://scraf.nl/examples/css/specificity/four.php

div#headcase span{background: red;}
span.block{background: green;}

<div id="headcase">
  <span class="block"></span>
</div>

If I take it one step further, and this was your solution in your first post...

Here the outcome is green, because the specific "class", over-rides the specific "id".
http://scraf.nl/examples/css/specificity/five.php

div#headcase span{background: red;}
div#headcase span.block{background: green;}

<div id="headcase">
  <span class="block"></span>
</div>

Spent far too much time working out exactly was going on on this one, thanks again for your help, and apologies if I have used the wrong terms when describing the likes of attributes and stuff.

160 Posts

hald Reply #6, 19 years, 7 months ago

when you are dealing with CSS, it helps to be able to visually see what your xhtml tag is getting and from what part of the css. To do that all you need is fireFox 2 and the FireBug addon and the Web Developer add in. You can tell instantly what part of the css is affecting what.
Cheers,
Hal D

"Today’s headlines are nothing more than whispers of history"

104 Posts

scraf Reply #7, 19 years, 7 months ago

Firebug = excellent tip Hald, thanks.

I was already using the Web Developer thingie, but that Firebug looks like it’s going to save me lots of time in the future, thanks for taking the time to post that.