Comment sélectionner le dernier élément qui n'a pas de classe spécifique ?

Question

Comment puis-je sélectionner la dernière li qui n'a pas le .hidden classe ?

Je dispose de HTML et CSS comme ceci :

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>

Answer 1

À l'heure actuelle, il n'existe pas de méthode CSS permettant de trouver un élément qui est ensuite suivi d'un autre élément spécifique.

Bientôt, il y aura peut-être une pseudo-classe relationnelle CSS. :has() qui rendra possible ce que vous voulez. Ceci est actuellement dans le Sélecteurs CSS Niveau 4 Draft et il est peu probable qu'il soit déployé sur tous les navigateurs dans un avenir proche.

Une démo est disponible ci-dessous, mais ne vous attendez pas à ce qu'elle fonctionne tant que la version préliminaire de Selectors 4 n'est pas au moins en version de travail.

Gardez un œil sur Peut-on utiliser pour voir quand il sera disponible.

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>

---

:has() est cependant disponible dans jQuery, voici donc une alternative jQuery

Plus d'informations ici dans les documents officiels de jQuery.

$('ul li:has(+ .hidden:last-child), ul li:not(.hidden):last-child').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button>1</button>
  </li>
  <li>
    <button>2</button>
  </li>
  <li class="hidden">
    <button>3</button>
  </li>
</ul>

Answer 2

Le CSS :nth y :last-child Les pseudo-sélecteurs ne peuvent fonctionner qu'avec tags et non d'autres sélecteurs comme :not o class mais s'il n'y en a toujours qu'un seul. .hidden li à la fin, alors vous pourriez utiliser quelque chose comme ceci :

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>