Как выбрать последний элемент, который не имеет определенного класса?

Как выбрать последний li, который не имеет класса .hidden?

У меня есть HTML и CSS:

ul li:last-child:not(:first-child):not(.hidden) button {
  background-color: red;
}

    <ul>
      <li>
        <button>1</button>
      </li>
      <li>
        <button>2</button>
      </li>
      <li class="hidden">
        <button>3</button>
      </li>
    </ul>

Ответ 1

В настоящий момент нет способа CSS, позволяющего найти элемент, за которым следует другой конкретный элемент.

Возможно, скоро появится CSS Relational Pseudo-class :has(), который сделает то, что вы хотите. Это в настоящее время находится в CSS Selectors Level 4 Draft и выглядит маловероятным для скорого развертывания в любых браузерах.

Ниже приведена демонстрация, но не ожидайте, что она будет работать до тех пор, пока черновик Selectors 4 не будет работать в рабочем проекте.

Следите за CanIUse, чтобы увидеть, когда он станет доступным.

ul li:has(+ .hidden:last-child),
ul li:last-child:not(.hidden) {
  background: red;
}

<ul>
  <li>
    <button>1</button>
  </li>
  <li>
    <button>2</button>
  </li>
  <li class="hidden">
    <button>3</button>
  </li>
</ul>

Ответ 2

Псевдоэлементы CSS :nth и :last-child могут работать только с тегами, а не с другими селекторами типа :not или class, но если всегда будет только один .hidden li в конце, вы можете использовать что-то вроде этого:

li:nth-last-child(2) { background: lightblue; }

<ul>
  <li>1</li>
  <li>2</li>
  <li class="hidden">3 hidden</li>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="hidden">4 hidden</li>
</ul>