Usar el selector de último hijo

Mi objective es aplicar el CSS en el último li , pero no hace eso.

 #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; } 
  

¿Cómo puedo seleccionar solo el último hijo?

La pseudoclass :last-child todavía no se puede usar de manera confiable en todos los navegadores. En particular, las versiones de Internet Explorer <9 y Safari <3.2 definitivamente no lo admiten , aunque Internet Explorer 7 y Safari 3.2 son compatibles :first-child , curiosamente.

Su mejor opción es agregar explícitamente una clase de last-child (o similar) a ese elemento, y aplicar li.last-child lugar.

Otra solución que podría funcionar para usted es revertir la relación. Entonces, establecería el borde para todos los elementos de la lista. Luego usaría el primer hijo para eliminar el borde del primer artículo. El primer hijo está soportado estáticamente en todos los navegadores (lo que significa que no se puede agregar dinámicamente a través de otro código, pero el primer hijo es un selector CSS2, mientras que el último hijo se agregó en la especificación CSS3)

Nota: Esto solo funciona de la manera prevista si solo tiene 2 elementos en la lista como su ejemplo. Cualquier tercer elemento y sucesivamente tendrá límites aplicados a ellos.

Si crees que puedes usar Javascript, entonces como jQuery es compatible con last-child , puedes usar el método de css de jQuery y lo bueno es que admitirá casi todos los navegadores.

Código de ejemplo:

 $(function(){ $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5") }) 

Puede encontrar más información aquí: http://api.jquery.com/css/#css2

Si la cantidad de elementos de la lista es fija, puede usar el selector adyacente; por ejemplo, si solo tiene tres elementos

  • , puede seleccionar el último

  • con:

     #nav li+li+li { border-bottom: 1px solid #b5b5b5; } 

    Si a menudo desea selectores de CSS3, siempre puede usar la biblioteca selectivizr en su sitio:

    http://selectivizr.com/

    Es un script JS que agrega compatibilidad para casi todos los selectores de CSS3 a los navegadores que de otra manera no los admitirían.

    Lánzalo a tu etiqueta con IE condicional:

      

    La pseudoclase de último hijo no funciona en IE

    Compatibilidad con CSS e Internet Explorer

    IE7 CSS Selectors: cómo fallan

    Como alternativa al uso de una clase, puede usar una lista detallada, estableciendo los elementos dt secundarios para tener un estilo y los elementos dd secundarios para tener otro. Tu ejemplo sería:

     #refundReasonMenu #nav li:dd { border-bottom: 1px solid #b5b5b5; } 

    html:

      

    Ninguno de los dos métodos es mejor que el otro y solo depende de las preferencias personales.

    Otra forma de hacerlo es usar el selector de último hijo en jQuery y luego usar el método .css (). Sin embargo, sé cansado porque algunas personas todavía están en la edad de piedra usando navegadores con JavaScript desactivado.

    ¿Por qué no aplicar el borde al final de la UL?

     #refundReasonMenu #nav ul { border-bottom: 1px solid #b5b5b5; } 

    Si está flotando los elementos, puede invertir el orden

    es decir, float: right; en lugar de float: left;

    Y luego use este método para seleccionar el primer hijo de una clase.

     /* 1: Apply style to ALL instances */ #header .some-class { padding-right: 0; } /* 2: Remove style from ALL instances except FIRST instance */ #header .some-class~.some-class { padding-right: 20px; } 

    Esto realmente está aplicando la clase a la ÚLTIMA instancia solo porque ahora está en orden inverso.

    Aquí hay un ejemplo de trabajo para usted:

      CSS Test       

    Es difícil de decir sin ver el rest de su CSS, pero intente agregar !important frente al color del borde, para que sea así:

     #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5 !important; }