html - selectores - Selector CSS último hijo: seleccione el último elemento de la clase específica, ¿no es el último hijo dentro del padre?
selector de hijos css (5)
¿Qué hay de esta solución?
div.commentList > article.comment:not(:last-child):last-of-type
{
color:red; /*or whatever...*/
}
<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
Quiero seleccionar #com19 ?
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
Eso no funciona, siempre y cuando tenga otro div.something como el último hijo real en la lista de comentarios. ¿Es posible utilizar el selector de último hijo en este caso para seleccionar la última aparición de article.comment ?
Algo que creo que debería comentarse aquí que funcionó para mí:
Use :last-child varias veces en los lugares necesarios para que siempre sea el último de los últimos.
Toma esto por ejemplo:
.page.one .page-container .comment:last-child {
color: red;
}
.page.two .page-container:last-child .comment:last-child {
color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>
<div class="page one">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>
<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container''s, last comment </p>
<div class="page two">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>
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>
Supongo que la respuesta más correcta es: Use :nth-child (o, en este caso específico, su contraparte :nth-last-child ). La mayoría solo conoce este selector por su primer argumento para tomar un rango de elementos basado en un cálculo con n, pero también puede tomar un segundo argumento "de [cualquier selector de CSS]".
Su situación podría resolverse con este selector: .commentList .comment:nth-last-child(1 of .comment)
Pero ser técnicamente correcto no significa que puedas usarlo, porque este selector solo está implementado en Safari.
Para lectura adicional:
:last-child solo funciona cuando el elemento en cuestión es el último elemento secundario del contenedor, no el último de un tipo específico de elemento. Para eso, quieres :last-of-type
Según el comentario de @ BoltClock, esto solo está buscando el último elemento del article , no el último elemento con la clase de .comment .
html
<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
css
body {
background: black;
}
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-of-type {
border-bottom:none;
margin-bottom:0;
}