CODEWITHSUNDEEP
csscss-selectors
matt
matt

Reputation: 44403

Css selector problem - children and parent?

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?

Upvotes: 0

Views: 483

Answers (3)

sEver
sEver

Reputation: 2305

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.

Upvotes: 1

Floern
Floern

Reputation: 33904

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.

Upvotes: 1

mylesagray
mylesagray

Reputation: 8869

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/

Upvotes: 0

Related Questions