CODEWITHSUNDEEP
csscss-selectors
NW Tech
NW Tech

Reputation: 328

CSS direct descendent selectors

I'm having a little trouble and I'm sure there's a simple fix for this seemly trvial question.

I have my HTML page setup with like the follow:

<ul class="locations">
   <li>
      Georgia
      <ul class="children">
         <li>
            Fulton County
            <ul class="children">
               <li>
                  Atlanta
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

I'm trying to style the "parents" list items one way, the "children" one way, and the "grandchildren" another way.

I've tried the following:

ul li{
    list-style: none;
    margin: 0;
}
ul.locations li+ul.children li{
    margin-left: 15px;
    clear: both;
}
ul.locationsli+ul.children li+ul.children li{
    float: left;
}

Where I want the "grandchildren" in this instance to float next to each other...regardless of how I work this our, clear:both; seems to be applied to both the "children" and "grandchildren" items. I also tried using > as a CSS selector with no luck.

Any ideas on fixing this? TIA

Upvotes: 0

Views: 3727

Answers (2)

Daniel Imms
Daniel Imms

Reputation: 50149

You're confusing siblings (~ or +) with direct descendants (>). Try this:

jsFiddle

ul li{
    list-style: none;
    margin: 0;
}
ul.locations > li > ul.children > li{
    margin-left: 15px;
    clear: both;
}
ul.locations > li > ul.children  > li > ul.children > li{
    float: left;
}

Upvotes: 6

Explosion Pills
Explosion Pills

Reputation: 191729

Your example doesn't have any siblings at all, but from what you're describing you don't even want to use sibling selectors (siblings are elements on the same level in the hierarchy). Essentially what you have will work if you remove all the +s, but you also need clear: none on the grandchildren.

ul li{
    list-style: none;
    margin: 0;
}
ul.locations li ul.children li{
    margin-left: 15px;
    clear: both;
}
ul.locations li ul.children li ul.children li {
    float: left;
    clear: none;
}

http://jsfiddle.net/pT8LA/

Upvotes: 1

Related Questions