Tengo algo de código HTML siguiente:

<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 CSS3 pseudo-clases para realizar cualquier li elemento que no es la primera o la última tiene un background-color de tomato por ejemplo? Parece que yo podría usar el :not selector.

InformationsquelleAutor haind | 2013-05-30

2 Comentarios

  1. 42

    Dos maneras :

    puede establecer una regla genérica, y luego reemplazar por :first-child y :last-child elementos. Esto juega a CSS fortalezas:

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

    O bien, puede utilizar el :not palabra clave combinado la combinación de los dos:

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

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

    • Tenga en cuenta que esto no funciona en IE8, como :last-child no es compatible.
  2. 8

    Aquí un lápiz
    http://codepen.io/vendruscolo/pen/AeHtG

    Tienes que combinar dos :not() pseudo clases:

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

    Aquí está el MDN documentación: como se dijo allí, y no se admite en IE < 9, mientras que es bien apoyado en otros navegadores.

    Si usted necesita IE 8, de tener que depender de Javascript o el uso de otra clase para indicar que elemento es el último hijo. De hecho, es decir, 8 (y menores) no es compatible con la :last-child pseudo clase.

    • Sí.Es muy útil cuando no se admite en IE < 9.Gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here