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
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 {
}