2 replies [Last post]
maflu
Offline
newbie
Last seen: 15 years 18 weeks ago
Joined: 2004-08-03
Posts: 4
Points: 0

Hello,

There is something I do not understand with CSS applied to the <ul> tag. The rule:
#somediv ul ul {something}
seems to apply similarly to all nested <ul> in a structure such as:
<ul>
<li></li>
<li>
<ul>
<li></li>
<li>
<ul>
<li></li>
<li>
</ul>
</ul>
</ul>
This rule also applies to the 3rd <ul> whereas I would have thought I would also need this rule for the 3rd <ul>:
#somediv ul ul ul {something}

It is the same thing for this rule:
#somediv li {something}
seems to apply to all nested <li>...

Is there an explanation for this?

Thank you for your help

Cheers
Chris

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Question about &lt;ul&gt;

Hi maflu,

It's because those are desendant selectors and effects all instances of the selector occuring within the topmost selector i.e #somediv li {font-size;12px;} effects all li within the #somediv. To just effect the first instance you would need to use the 'child' selector '>' then only the selector that is a direct offspring of it's parent is effected, but be carefull as IE has very poor support for contextual selectors and doesn't support the child selector at all.
hope that helps,

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

maflu
Offline
newbie
Last seen: 15 years 18 weeks ago
Joined: 2004-08-03
Posts: 4
Points: 0

Question about &lt;ul&gt;

Yes it helps. Thank you. I understand now.
Cheers