Mi objetivo es aplicar CSS en el último li, pero no hace eso.
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>¿Cómo puedo seleccionar solo al último hijo?
Respuestas:
La :last-childpseudoclase aún 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 soportan , aunque Internet Explorer 7 y Safari 3.2 hacen de soporte :first-child, con curiosidad.
Su mejor last-childopción es agregar explícitamente una clase (o similar) a ese elemento y aplicar en su li.last-childlugar.
:last-child .
Otra solución que podría funcionar para usted es invertir la relación. Por lo tanto, establecería el borde para todos los elementos de la lista. Luego, usaría first-child para eliminar el borde del primer elemento. El primer hijo es compatible 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 de CSS2, mientras que el último hijo se agregó en la especificación CSS3)
Nota: Esto solo funciona de la manera que pretendía si solo tiene 2 elementos en la lista como su ejemplo. Se aplicarán bordes a cualquier tercer elemento en adelante.
Si cree que puede usar Javascript, entonces, dado que es compatible con jQuery last-child, puede usar el método css de jQuery y lo bueno es que será compatible con 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
$("#nav li:last-child").addClass('last-child')para que puedas mantener tu estilo en tus hojas de estilo.
div:last-childy div.last-child. Parece que considera que la :last-childsintaxis no es válida y no se aplicará ninguna clase con ese pseudo-selector.
Si el número de elementos de la lista es fijo, puede usar el selector adyacente, por ejemplo, si solo tiene tres <li>elementos, puede seleccionar el último <li>con:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liselecciona el liinterior #navque viene después li. Su selector debería ser simplemente #nav li + li + li.
Si se encuentra buscando con frecuencia selectores CSS3, siempre puede usar la biblioteca selectivizr en su sitio:
Es un script JS que agrega soporte para casi todos los selectores CSS3 a navegadores que de otra manera no los admitirían.
Tíralo a tu <head>etiqueta con un condicional de IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->la pseudoclase del último hijo no funciona en IE
Como alternativa al uso de una clase, puede usar una lista detallada, configurando los elementos dt secundarios para que tengan un estilo y los elementos dd secundarios para que tengan otro. Tu ejemplo se convertiría en:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}html:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>Ninguno de los métodos es mejor que el otro y depende de las preferencias personales.
¿Por qué no aplicar el borde en la parte inferior de la UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomen el <ul>elemento o margin-bottomen el último <li>elemento, este no tendrá la ubicación deseada de justo debajo del último <li>elemento. De lo contrario, esta es una buena solución.
Si está flotando los elementos, puede invertir el orden
es decir, en float: right;lugar defloat: 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;
}En realidad, esto está aplicando la clase a la ÚLTIMA instancia solo porque ahora está en orden inverso.
Aquí hay un ejemplo práctico para ti:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>Es difícil decirlo sin ver el resto de su CSS, pero intente agregar !importantdelante del color del borde, para que sea así:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
:last-child. Y no es que la curiosidad.:first-childes una pseudoclase CSS2,:last-childuna pseudoclase CSS3.