Search code examples
nestedhtml-lists

Apply style to all nested li div's excluding the first li div


No matter what I've tried to either target or exclude the first li div, nothing works. I tried :not(and different variations of the selectors here) but that didn't work. On one occasion, the result rendered as though looking into a mirror that's facing a mirror. No bueno. No classes or ids can be added--representative example below.

ul {
  list-style-type: none;
}

.message-content-wrap {
  background-color: red;
}



<ul id="thread-list" class="group-message-thread">
    <li>
        <div class="message-wrap group-messages-highlight">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                  <p>This is content in the first message</p>
                </div>
            </div>
        </div>
    </li>

    <li>
        <div class="message-wrap">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                  <p>This is content in the second message</p>
                </div>
            </div>
        </div>
    </li>

    <li>
        <div class="message-wrap">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                    <p>This is content in the third message</p>
                    <p>some text</p>
                </div>
            </div>
        </div>
    </li>

    <li>
        <div class="message-wrap">
            <div class="avatar-wrap"></div>
            <div class="message-content">
                <div class="message-content-wrap">
                    <p>This is content in the fourth message</p>
                    <p>some more text</p>
                </div>
            </div>
        </div>
    </li>
    
</ul>

Any ideas would be most welcome. My attempt in jsfiddle


Solution

  • a few ways to style child elements

    ul > li:not(first-of-type) {
    
    //  styles go here
    }
    
    ul > li {
    
    //  styles go here
    }
    
    ul:first-child {
    }
    li + li {
    }