stylesheet question

#1

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

#2

jmc schrieb:

Quote:

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>

Quote:

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>

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

#3

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

Quote:

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

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

#4

Fri, 28 Dec 2007 23:47:59 +0930 from jmc
<NOnewsgroupsSPAM (AT) NOjodiBODY (DOT) HOMEus>:

Quote:

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.

Quote:

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.

--
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/200..._wont_help_you

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

stylesheet question

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

stylesheet question - 12-28-2007 , 08:17 AM

Re: stylesheet question - 12-28-2007 , 08:31 AM

Re: stylesheet question - 12-28-2007 , 04:35 PM

Re: stylesheet question - 12-28-2007 , 04:44 PM