Css selector problem - children and parent?

Question

I wonder how I can select ONLY the top level "Mega Parent" in my example?

<li class="page_item parent"><a href="#"> Mega Parent</a>
        <ul class="children">
            <li class="page_item parent"><a href="#">Subparent</a>
                <ul class="children">
                    <li class="page_item"><a href="#">Child</a></li>
                </ul>
            </li>
        </ul>
    </li>

I want only my top parent item "Mega Parent" to have e.g. a red color. What's the best way to solve this?

Possible duplicate of http://stackoverflow.com/questions/977883/selecting-only-first-level-elements-in-jquery — Brian Flanagan, Mar 12 '11 at 19:03

score 1 · Accepted Answer · answered Mar 12 '11 at 19:03

1

You could use something like this:

.page_item.parent > a { color: red; }
.page_item.parent li > a { color: inherit; }

Or you could add an extra class to your megaparent's element, which sets an additional style.

answered Mar 12 '11 at 19:03

Floern

33,559
24
104
119

sEver · Answer 2 · 2011-03-12T19:17:27.040

This should be solved while defining classes, not while addressing them. But if you can't define them, I'd just go different selector for the nested one to overwrite the default you apply to all elements

.page_item.parent a{ color:red; }

.page_item.parent ul.children .page_item.parent{ color:black;}

or any other kind of default styling, you could also just append the second selector to some other definition.

score 0 · Answer 3 · answered Mar 12 '11 at 19:01

0

CSS uses inheritance for certain values, you may been to set color manually on descendants to negate the inheritance.

See here for an explanation:

http://dorward.me.uk/www/css/inheritance/

answered Mar 12 '11 at 19:01

Myles Gray

8,711
7
48
70

Css selector problem - children and parent?

3 Answers3