pares - CSS3 pseudo clase no primer y último hijo

pseudo clases y pseudo elementos css

Question

Tengo algunos códigos HTML siguientes:

<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>

¿Cómo puedo usar pseudo-clases CSS3 para hacer que cualquier elemento li que no sea el primero o el último tenga un background-color de background-color de tomato por ejemplo? Parece que podría usar el :not selector.

Answer 1

Aquí hay una pluma http://codepen.io/vendruscolo/pen/AeHtG

Tienes que combinar dos :not() pseudo clases:

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

Aquí está la documentación de MDN : como se indica allí, no es compatible con IE <9, mientras que es compatible con otros navegadores.

Si necesita compatibilidad con IE 8, debe confiar en Javascript o usar otra clase para indicar qué elemento es el último elemento secundario. De hecho, IE 8 (e inferior) no admite la pseudo clase :last-child .

Answer 2

Dos caminos :

puede establecer una regla genérica y luego anularla para :first-child y de :last-child . Esto juega a las fortalezas de CSS:

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

O bien, puede utilizar la combinación de palabras clave :not combinando las dos:

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

De los dos, personalmente prefiero el primero: es más fácil de comprender y mantener (en mi opinión).