:first-child Where Class is :not(.disabled)

Question

I'm trying to select the first element in a list which doesn't have the class="disabled". Anyone know how to pull this off?

Answer 1

This is sadly not possible directly in CSS, due to the way selectors are organized.

You can however hack around it by using both a positive and a negative selector, first selecting all non-disabled items and styling them, and then using the general sibling selector ~ to unstyle the others:

.disabled {
  background:red;
  color:white;
}
li:not(.disabled):after {
  content:" (THIS IS THE FIRST NON DISABLED ITEM)";
}
li:not(.disabled) ~ li:not(.disabled):after {
  content:"";
}

<ul>
  <li class="disabled">Item</li>
  <li class="disabled">Item</li>
  <li>Item</li>
  <li class="disabled">Item</li>
  <li>Item</li>
  <li class="disabled">Item</li>
  <li>Item</li>
</ul>

Answer 2

This should do the tricks, full credits to BoltClock♦

li:not(.disabled) {
  /* Every li without class .disabled, including the first */
  background: red;
}

li:not(.disabled) ~ li:not(.disabled) {
  /* Revert above declarations for every such element after the first */
  background: none;
}

<ul>
  <li class="disabled">disabled</li>
  <li class="disabled">disabled</li>
  <li class="not-disabled">not-disabled</li>
  <li class="disabled">disabled</li>
  <li class="disabled">disabled</li>
  <li class="disabled">disabled</li>
  <li class="disabled">disabled</li>
  <li class="not-disabled">not-disabled</li>
</ul>

Answer 3

Try this code:

li:first-child:not(.disabled),
li.disabled + li:not(.disabled) {
  /* ...your code. */
}