Style the
that has child elements

Question

I'm trying to create a top menu with a dropdown submenu function. I want to target the list items witch have a submenu (child element) attached to it. So that i can style them with a different color list style etc.

HTML:

<nav>
    <ul><div id="logo">
            <img src="images/design/logo.png" alt="Logo for responsive template" />
        </div>
        <li>Home</li>
        <li>Parrent Link
            <ul>
                <li>Child Link</li>
                <li>Child Link</li>
                <li>Parrent Link
                    <ul>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                        <li>Child Link</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>About</li>
        <li>Gallery</li>
        <li>Contact</li>
    </ul>
</nav>

So each Parrent link get another style than the rest.

How do you mean like this? [**DEMO HERE**](http://jsfiddle.net/Ruddy/6uk2x/) — Ruddy, Jan 13 '14 at 14:59
Take a look at this post http://stackoverflow.com/questions/5281556/is-there-a-css-way-to-add-an-arrow-if-a-ul-has-a-ul-child — Filip Huysmans, Jan 13 '14 at 15:15
@ItayGal Yes, it was very helpfuf, it does the trick. If somebody else wanne use this but not wanna target the first parrent just replace "if(parent.is('li')){" with "if(parent.is('ul li ul li')){" — Legarndary, Jan 14 '14 at 10:00

Itay Gal · Accepted Answer · 2014-01-13T15:34:34.350

2

You can do it with JQuery: example

$(function(){
    $('li').each(function(){   
        var parent = $(this).parent().parent();
        if(parent.is('li')){
            parent.addClass("colored");
        } 
    })
});

This solution assumes that your HTML is valid and you use <ul> and <li> correctly.

edited Jan 13 '14 at 15:34

answered Jan 13 '14 at 15:26

Itay Gal

10,706
6
36
75

score 1 · Answer 2 · answered Jan 13 '14 at 15:02

You can't select an element based in descendent elements. Then you can't have a selector like this:

select all <li> tags that contain an <ul> tag

In the other way you can

select all <ul> tags inside a <li> tag

The best you can do is assign a class:

<li>Child Link</li>
   <li>Child Link</li>
   <li class="sub">Parrent Link
      <ul>
        <li>Child Link</li>
        <li>Child Link</li>
        <li>Child Link</li>
        <li>Child Link</li>
        <li>Child Link</li>
      </ul>
    </li>

It's a shame. If only we could have XPath in CSS, that'd be awesome. `//li[./ul]` — Niet the Dark Absol, Jan 13 '14 at 15:36

score 0 · Answer 3 · answered Jan 13 '14 at 15:07

0

I Would change the ul.class every time i make a new list.

so that, if the ul li has children, it will change automatically, if i want to have children there.

answered Jan 13 '14 at 15:07

Rafa Romero · Answer 4 · 2014-01-13T15:15:08.020

-3

You just have to use CSS selectors as follows:

ul > li > li {
   // your css code here
}

You havethe official documentation in the W3C site.

No need tu use id's or class tags

edited Jan 13 '14 at 15:15

answered Jan 13 '14 at 15:09

Rafa Romero

2,667
5
25
51

1

With this you target all `li` direct childs of an `ul` tag . Not all `li` elements with an `ul` inside. OP wants *the list items witch have a submenu (child element)* – DaniP Jan 13 '14 at 15:10
You are right, sorry! I did not understand the question well, I editted my answer so now it targets the list elements – Rafa Romero Jan 13 '14 at 15:15

Style the that has child elements

4 Answers4

Style the
that has child elements