stylesheet question

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

jmc - 28 Dec 2007 14:17 GMT

I'm a self-taught webmaster, and have never had the luxury of working
under a more experienced colleague. For the most part I do fine, but
occasionally I find there's some glaring holes in my knowledge. This
may be one:

Is there any difference in, for example-

.list li {display:block;}

and

li.list {display:block;}

Sometime ago, I learned to do things the first way. Today I noticed my
textbook uses the second method, and doesn't mention the first at all.

If they don't do the same thing, how would they work differently? Feel
free to use a different set of "tag and class" if my example doesn't
work for you.

I've done all my stylesheets the first way, and everything seems to work
as it should. I want to find out if I'm truly doing something wrong,
and need to rewrite all my stylesheets.

Or when I should one or the other.

Thanks for any help!

jmc

Reply to this Message

Johannes Koch - 28 Dec 2007 14:31 GMT

jmc schrieb:

> Is there any difference in, for example-
>
> .list li {display:block;}

This one selects li elements that are descendants of elements that
belong to the "list" class, e.g.

<ul class="list">
<li>item</li>
</ul>

but also

<div class="list foo">
<ul>
<li>item</li>
</ul>
</div>

> and
>
> li.list {display:block;}

This one selects li elements that belong to the "list" class, e.g.

<ul>
<li class="list">item</li>
</ul>

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

jmc - 28 Dec 2007 22:35 GMT

Suddenly, without warning, Johannes Koch exclaimed (12/29/2007 12:01 AM):

> jmc schrieb:
>> Is there any difference in, for example-
[quoted text clipped - 25 lines]
> <li class="list">item</li>
> </ul>

Ok, thank you. That makes sense. So, yes, I'll have to edit some of my
code.

Where this has come up, is my code was working properly, until I decided
to add a doctype to my page. Then, suddenly, some things stopped
working, though others did not. I suspect quirks mode allows .list li
to cause <li class="list"> to work, but standards mode does not.

jmc

Reply to this Message

Stan Brown - 28 Dec 2007 22:44 GMT

Fri, 28 Dec 2007 23:47:59 +0930 from jmc
<NOnewsgroupsSPAM@NOjodiBODY.HOMEus>:

> Is there any difference in, for example-
> .list li {display:block;}

This one affects li elements that are under some element with a class
of "list". That's *under*, not immediately under. So if you had <body
class="list"> then all li's within that would be affected, just as if
you had <ul class="list"> and then li elements immediately under
that.

> li.list {display:block;}

This one affects only li elements with a class of "list":
<li class="list">. It doesn't matter what class (if any) the parents
have been assigned.

With CSS rules, the level of specificity matters. So rather than
either of those I would do

ul.list li, ol.list li { display:block }

and then in my HTML I would assign the "list" class to the desired
ul's and ol's. This applies the "display:block" to the li's
immediately under those ul's and ol's, but not to any li's in sub-
lists.

Signature

Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2007

stylesheet question