css recursion

[Jon Slaughter]

Say I'm giving a hypothetical structure such as(in reality it would be more
complicated with arbitrary nestings)

<div id="PageComments">
<div>
Mike Jones - Subject
<div>
Jone Smoth - Subject2
<div>
Mike Jones - Subject2
</div>
</div>
<div>
Jeff - Subject3
</div>
</div>
<div>
Mike Applehaead - Subject is dead3
</div>
<div>
Cable - Subject is dead5
</div>
</div>


Is there a way to apply a style recursive to it to so that each div is given
the same style? What are the pro's and cons of inlining or using class=?

What I'm afraid of is that if I use some type of css recursion that it might
slow down the browser when it is applying the styles.

Any thoughts?

Thanks,
Jon

 

[Adrienne Boswell]

Say I'm giving a hypothetical structure such as(in reality it would be
more complicated with arbitrary nestings)

<div id="PageComments">
<div>
Mike Jones - Subject
<div>
Jone Smoth - Subject2
<div>
Mike Jones - Subject2
</div>
</div>
<div>
Jeff - Subject3
</div>
</div>
<div>
Mike Applehaead - Subject is dead3
</div>
<div>
Cable - Subject is dead5
</div>
</div>


Is there a way to apply a style recursive to it to so that each div is
given the same style?

div {background-color:#fff; color:#000} /* will style any div element */

What are the pro's and cons of inlining or using

class=?

div.gray {background-color:#c0c0c0; color:#fff} /* will style any div
with the class gray */

<div style="background-color:#c0c0c0; color:#fff}">This div is gray and

What I'm afraid of is that if I use some type of css recursion that it
might slow down the browser when it is applying the styles.

Any thoughts?

Your example above does not seem like it has semantic structure, it seems
like div soup. It looks like some hierachial structure, so might be more
suited to list markup and/or headings instead of nested divs.

Think about the structure of the page, and then style it accordingly.

 

[dorayme]

Say I'm giving a hypothetical structure such as(in reality it would be more
complicated with arbitrary nestings)

<div id="PageComments">
<div>
Mike Jones - Subject
....


Is there a way to apply a style recursive to it to so that each div is given
the same style? What are the pro's and cons of inlining or using class=?

What I'm afraid of is that if I use some type of css recursion that it might
slow down the browser when it is applying the styles.

Any thoughts?

Extraordinary thinking and speaking. "Hypothetical structure",
"in reality", arbitrary nestings", "a way to apply a style
recursive to it" (without it even being clear what the "it"
refers to)...

The pro of a class is that you state a rule once and it refers to
whatever falls under it in the html, the pro of an inline is that
it is easier if it is a one off for a particular bit in the html.

If you want all the divs to be be styled the same, you don't even
need to class anything. div {color: red;] will make all the text
in all the divs red unless you do something else to stop this. In
fact, if you want a whole lot of things in a div to be the same,
you do this and just class or inline the exceptions.

 

[Jon Slaughter]

Extraordinary thinking and speaking. "Hypothetical structure",
"in reality", arbitrary nestings", "a way to apply a style
recursive to it" (without it even being clear what the "it"
refers to)...

um... maybe you just don't understand those big words in context?

The pro of a class is that you state a rule once and it refers to
whatever falls under it in the html, the pro of an inline is that
it is easier if it is a one off for a particular bit in the html.

If you want all the divs to be be styled the same, you don't even
need to class anything. div {color: red;] will make all the text
in all the divs red unless you do something else to stop this. In
fact, if you want a whole lot of things in a div to be the same,
you do this and just class or inline the exceptions.

No, I need something similar but I need to use only the those divs in the
nesting

div[id="blah"] div
{

}

would probably work.

My question isn't about how to do it but the ramifications between the
different methods as far as efficiency goes.... something you didn't
address.

 

[Jon Slaughter]

div {background-color:#fff; color:#000} /* will style any div element */

What are the pro's and cons of inlining or using

div.gray {background-color:#c0c0c0; color:#fff} /* will style any div
with the class gray */

<div style="background-color:#c0c0c0; color:#fff}">This div is gray and


Your example above does not seem like it has semantic structure, it seems
like div soup. It looks like some hierachial structure, so might be more
suited to list markup and/or headings instead of nested divs.

no semantic structure? Its a nested set of divs... thats the structure. You
are right about the hierarchial structure and I did think about lists and
maybe thats a better way to go but I feel that its probably equivilent to
the divs as I wouldn't really gain much advantage using them(except maybe
the automatic indention.

Think about the structure of the page, and then style it accordingly.

huh?

 

[Ben C]

Say I'm giving a hypothetical structure such as(in reality it would be more
complicated with arbitrary nestings)

<div id="PageComments">
<div>
Mike Jones - Subject
<div>
Jone Smoth - Subject2
<div>
Mike Jones - Subject2
</div>
</div>
<div>
Jeff - Subject3
</div>
</div>
<div>
Mike Applehaead - Subject is dead3
</div>
<div>
Cable - Subject is dead5
</div>
</div>


Is there a way to apply a style recursive to it to so that each div is given
the same style?

div { ... }

or #pageComments div { ... }

What are the pro's and cons of inlining or using class=?

A class is usually better than using inline style attributes since all
the properties go in one selector. Whether you need a class or just a
descendent selector depends on your application.

What I'm afraid of is that if I use some type of css recursion that it might
slow down the browser when it is applying the styles.

Most unlikely. You have to think this through: the browser is going to
have to do something with every <div> in your page anyway to work out
where to draw it on the screen. It's the least of its worries to add a
style from a simple selector like div { ... }.

There's no reason to assume it's programmed like this:

for each div
apply styles

for each div
do everything else

rather than like this:

for each div
apply styles
do everything else

and in any case there's not much reason why the former should be
significantly slower.

In fact using a selector rather than inline styles may be a tiny bit
faster because of the reduced amount of parsing.

A more complex selector like div td div { ... } will be slightly harder
to match since it's a little bit like an easy version of matching a
regular expression, but I wouldn't worry about it.

 

[JD]

Ben C wrote:

In fact using a selector rather than inline styles may be a tiny bit
faster because of the reduced amount of parsing.

A more complex selector like div td div { ... } will be slightly harder
to match since it's a little bit like an easy version of matching a
regular expression, but I wouldn't worry about it.

Sort of reminds me of a question I was thinking about recently.

Is 'optimisation' any valid reason to consciously limit the depth of
descendant selectors in CSS? For example, suppose I have a list of links
inside a #navbar div. To style the a elements in the navbar, I could do
this:

#navbar a { ... }

but I prefer to do this:

#navbar ul li a { ... }

just because I find the latter slightly more lucid when reading the
stylesheet.

Is there any circumstance where this coding style could noticeably slow
things down? Or is worrying about this stuff a waste of time because the
speed differences are so negligible?

 

[Jon Slaughter]

div { ... }

or #pageComments div { ... }


A class is usually better than using inline style attributes since all
the properties go in one selector. Whether you need a class or just a
descendent selector depends on your application.


Most unlikely. You have to think this through: the browser is going to
have to do something with every <div> in your page anyway to work out
where to draw it on the screen. It's the least of its worries to add a
style from a simple selector like div { ... }.

There's no reason to assume it's programmed like this:

for each div
apply styles

for each div
do everything else

rather than like this:

for each div
apply styles
do everything else

and in any case there's not much reason why the former should be
significantly slower.

In fact using a selector rather than inline styles may be a tiny bit
faster because of the reduced amount of parsing.

A more complex selector like div td div { ... } will be slightly harder
to match since it's a little bit like an easy version of matching a
regular expression, but I wouldn't worry about it.

Ok, I did that and I got my code sorta working... I have a slight issue. I'm
going to put it in another post.

Thanks,
Jon

 

[Ben C]

Ben C wrote:


Sort of reminds me of a question I was thinking about recently.

Is 'optimisation' any valid reason to consciously limit the depth of
descendant selectors in CSS? For example, suppose I have a list of links
inside a #navbar div. To style the a elements in the navbar, I could do
this:

#navbar a { ... }

but I prefer to do this:

#navbar ul li a { ... }

just because I find the latter slightly more lucid when reading the
stylesheet.

Is there any circumstance where this coding style could noticeably slow
things down? Or is worrying about this stuff a waste of time because the
speed differences are so negligible?

I wouldn't worry about it. The second selector _may_ take longer to
match, but even that's an assumption, and compared to all the other
things the browser's got to do it's unlikely to be very much.

The time when you might notice things like this is popup-menu systems
that use complicated selectors involving :hovers halfway up them and
where any sluggishness would be noticeable on a slow machine. Unlikely
to matter on a PC but if you've got a browser on a mobile phone you
might see a difference, depending on how the browser's been implemented.

 

[dorayme]

Extraordinary thinking and speaking. "Hypothetical structure",
"in reality", arbitrary nestings", "a way to apply a style
recursive to it" (without it even being clear what the "it"
refers to)...

um... maybe you just don't understand those big words in context?[/QUOTE]

Like, of course, you do.

 

[mbstevens]

um... maybe you just don't understand those big words in context? ....

No, I need something similar but I need to use only the those divs in the
nesting

Have a look in here:
http://www.w3.org/TR/CSS21/cascade.html

 

[Adrienne Boswell]

no semantic structure? Its a nested set of divs... thats the
structure.

A div is a division, or can be used as a generic block container. So if

You are right about the hierarchial structure and I did
think about lists and maybe thats a better way to go but I feel that
its probably equivilent to the divs as I wouldn't really gain much
advantage using them(except maybe the automatic indention.

The automatic indentation doesn't mean s--t to a tree. The important part
is the _meaning_ of the text, and what element(s) best express that
meaning.

huh?

When markup is done semantically, it makes CSS a lot easier, because you
are already thinking that way. Everything has a place, and everything in
it's place.

 

[Harlan Messinger]

Say I'm giving a hypothetical structure such as(in reality it would be more
complicated with arbitrary nestings)

<div id="PageComments">
<div>
Mike Jones - Subject
<div>
Jone Smoth - Subject2
<div>
Mike Jones - Subject2
</div>
</div>
<div>
Jeff - Subject3
</div>
</div>
<div>
Mike Applehaead - Subject is dead3
</div>
<div>
Cable - Subject is dead5
</div>
</div>


Is there a way to apply a style recursive to it to so that each div is given
the same style? What are the pro's and cons of inlining or using class=?

#PageComments div { [styles] }

Especially if every DIV is supposed to have the same style, why *would*
you inline if you don't have to?

What I'm afraid of is that if I use some type of css recursion that it might
slow down the browser when it is applying the styles.

Every element on the page is styled in some way or other whether it's a
purely browser-default way or a way that incorporates your own
instructions.