web-dev-qa-db-fra.com

La pseudo-classe CSS3 n'est pas le premier et le dernier enfant

J'ai du code HTML suivant:

<ul>
    <li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
</ul>

Comment puis-je utiliser les pseudo-classes CSS3 pour que tout élément li qui n'est ni le premier ni le dernier ait un background-color de tomato par exemple? Il semble que je pourrais utiliser le :not sélecteur.

css3pseudo-class
22
haind

Deux façons :

vous pouvez définir une règle générique, puis la remplacer pour :first-child et :last-child articles. Cela joue sur les points forts de CSS:

 li { background: red; }
 li:first-child, li:last-child { background: white; }

Ou, vous pouvez utiliser le :not mot clé combiné combinant les deux:

li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }

Des deux, je préfère personnellement le premier - il est plus facile à comprendre et à maintenir (à mon avis).

43
Nick Andriopoulos

Voici un stylo http://codepen.io/vendruscolo/pen/AeHtG

Vous devez combiner deux pseudo-classes :not():

li:not(:first-child):not(:last-child) {
  background: red;
}

Voici le documentation MDN : comme indiqué ici, il n'est pas pris en charge sur IE <9, alors qu'il est bien pris en charge sur d'autres navigateurs.

Si vous avez besoin de la prise en charge de IE 8, vous devez vous fier à Javascript ou utiliser une autre classe pour indiquer quel élément est le dernier enfant. En fait, IE 8 ( et inférieur) ne prend pas en charge le :last-child pseudo-classe.

9
Alessandro Vendruscolo