CODEWITHSUNDEEP
csscss-selectors
Kristians
Kristians

Reputation: 794

Styling a dynamic nested UL structure

I have a nested UL structure that represents a folder tree which can grow very deep. I'm stuck at doing a simple :hover effect for the LI elements. The problem is that doing a li:hover won't work as it affects all the parent "li's" aswell. Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style aswell, but due to circumstances that's not an option now. I have a working solution by using javascript to place a class on the hovered LI and then style this class instead, but i'm really interested in seeing if there's actually a way of accomplishing this through pure css.

I imagine there may be a way of doing a very "hardcoded" css solution but i am more interested in a dynamic and clean one, since the structure can nest indefinitely.

Maybe there's some pseudo selector i'm not aware of? Note that it doesn't have to be IE<8 compatible

<ul>
    <li>
        This LI should not recieve the hover effect
        <ul>
            <li>
                A li:hover will place the effect on this LI, 
                but also the parent LI, since that element is
                also techincally being hovered.
            </li>
        </ul>
    </li>
</ul>

Upvotes: 3

Views: 1199

Answers (4)

ScottS
ScottS

Reputation: 72261

UPDATE: I just reread your question, in which you state:

"Usually I would have tried to apply the hover effect to a link element or something in the LI, to avoid parents taking the style as well, but due to circumstances that's not an option now."

If that is true, then the solution below is not viable for your circumstance, and you cannot achieve what you desire with pure CSS. I've left my answer, however, as others who want to achieve this but can use a nested element may find it useful.

Pure CSS Only by Adding HTML

The only way you can possibly achieve something of what you seek by pure CSS is to add an extra element (like a span) within the li and perform the hover on that. I assume that whatever folder is being hovered, that folder alone is what you want to highlight. If so, this fiddle illustrates what I am saying, using this code:

HTML

<ul>
    <li>
        <span>Folder 1</span>
        <ul>
            <li>
                <span>Folder 1.1</span>
                <ul>
                    <li>
                        <span>Folder 1.1.1</span>
                        <ul>
                            <li>
                                <span>Folder 1.1.1.1</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

li span:hover {
    color: red;
    background-color: yellow;
}

Now, if you want child folders to also highlight on hover of a parent folder, then perhaps this fiddle illustrates what you want with this code change:

CSS

li span:hover,
li span:hover + ul span {
    color: red;
    background-color: yellow;
}

They key point is to utilize the extra element to control the hover, whether of the item itself or any later generation elements that the hover should affect.

Upvotes: 1

Nobel Chicken
Nobel Chicken

Reputation: 1551

If you want to use pure CSS then you will need to us parent, child, elements.

For the hover elements:

ul li:hover{
   "Style"
}

For the other elements:

ul li ul li{
    "Style"
}

Upvotes: 1

Venkat.R
Venkat.R

Reputation: 7746

Your question is not very clear and also it will confuse. Let me explain, when the user hover the city (India / China / UK), style should be applied to State and Country through CSS.

<ul>
  <li>India (Apply Style)
    <ul>
      <li>India State (Apply Style)
        <ul>
          <li>India City (On Hover)</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>China
    <ul>
      <li>China State
        <ul>
          <li>China City</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>United Kingdom
    <ul>
      <li>UK State
        <ul>
          <li>UK City</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 0

gmo
gmo

Reputation: 9010

Not clear at all... but if you want to style nested LI when you are hovered the parent LI without styling the parent one...

Try this:

CSS

ul li ul li {
    color: blue
}
ul li:hover ul li {
    color: red
}

fiddle example: http://jsfiddle.net/EHp3n/

Upvotes: 0

Related Questions