css - example - Usar el selector de último hijo
header html example (11)
Mi objetivo es aplicar el 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 el último hijo?
¿Por qué no aplicar el borde al final de la UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}
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:
<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 dos métodos es mejor que el otro y solo depende de las preferencias personales.
Es difícil de decir sin ver el resto 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;
}
La pseudoclase de último hijo no funciona en IE
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 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.
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 a menudo desea selectores de CSS3, siempre puede usar la biblioteca selectivizr en su sitio:
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 <head> con IE condicional:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
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 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:
<!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>
Si la cantidad de elementos de la lista es fija, puede usar el selector adyacente; por ejemplo, si solo tiene tres elementos <li> , puede seleccionar el último <li> con:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}