Forum Moderators: not2easy

Message Too Old, No Replies

checking for child elements

         

icpooreman

8:45 pm on Jul 17, 2005 (gmt 0)

10+ Year Member



I'm hoping someone might have some knowledge on this. in css w/out any javascript can I check to see if an element contains an element and if it does effect the original element. That's tough to follow so I'll give an example I've built a menu bar in css w/unordered lists and want to give an effect to a <li> only if it contains another <ul>
For example:
<ul>
<li> I don't want this to be effected </li>
<li> I want to add an effect to this li because it contains its own sublist but I somehow need to check for that in css
<ul>
<li> this doesn't contain a sublist so it stays uneffected </li>
</ul>
</li>
</ul>

createErrorMsg

8:53 pm on Jul 17, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



want to give an effect to a <li> only if it contains another <ul>

The short answer is no.

The long answer is that C(ascading)SS works from the top of the document tree down. There's no way to use CSS alone to move up that document tree, which is what your application would require.

First, it would have to read through the document tree in order to identify whether a given LI contains a UL. This part is very easy...

li ul{propery:value;}

...does that. The problem is the second part, where the browser is asked to take it's newfound knowledge of the child UL's presence, and move back up the tree to apply styles to the LI it's just read past. Sadly, that's a no-can-do in CSS.

I would suggest either (a) use JS,(c) detect the UL on the server side with PHP or ASP and have it apply a class or inline style to the element, or (c) manually tag any LI containing a UL with a class name and apply the styles to that.

cEM