Question

Let’s say I have the following HTML:

<ul>
    <li id="1">First issue.</li>
    <li id="2" class="error">Second issue.</li>
    <li id="3" class="error">Third issue.</li>
    <li id="4">Fourth issue.</li>
    <li id="5" class="error">Fifth issue.</li>
    <li id="6" class="error">Sixth issue.</li>
    <li id="7" class="error">Seventh issue.</li>
    <li id="8" class="error">Eighth issue.</li>
    <li id="9">Ninth issue.</li>
    <li id="10" class="error">Tenth issue.</li>
</ul>

And the following CSS:

.error {
    background-color: rgba(255, 0, 0, 0.2);
}

What I’m looking to do is to style the first and last <li> in a sequence styled different than other <li>s that are in the middle.

For example, #2, #5, #10 should all match the “first in sequence selector”; #3, #8, #10 should be matched by the “last in sequence selector.”

I’d like to apply the following styles to “first-in-sequence” and “last-in-sequence”, respectively:

.firstInSequence {
    border-radius-top-right: 10px;
    border-radius-top-left: 10px;
}

.lastInSequence {
    border-radius-bottom-right: 10px;
    border-radius-bottom-left: 10px;
}

Are there selectors I could use to do this natively in CSS?

Answer 1

As stated in the other answers, you can style the ‘first of sequence’ using the :not and :first-child pseudo selector:

:not(.error) + .error,
.error:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

I think I’ve found a solution for ‘last of sequence’ in this scenario with rounded corners. It uses a completely different method of accomplishing the finished product, but ends with a similar result:

The basic technique is to apply pseudo-elements with radial-gradients to list items that are not .error. after .errors, and move them up over the previous (.error) list item:

.error + :not(.error):before {
    content:'';
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    top:-20px;
    left:0;
    background:-webkit-radial-gradient(100% 0,circle,transparent 10px,white 0);
}

.error + :not(.error):after {
    content:'';
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    top:-20px;
    right:0;
    background:-webkit-radial-gradient(0 0,circle,transparent 10px,white 0);
}

Make sure li has position:relative;.

Finally, for a border-radius on the last one, use last-of-type:

.error:last-of-type{
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px
}

Demo (Webkit only for simplicity)