html - ¿Cómo puedo seleccionar el primer o el último hijo con CSS correcto?
css-selectors (2)
Quiero seleccionar el primer y el último hijo con CSS pero no funciona. Echa un vistazo a mi violín y ayúdame:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
Le aconsejo que agregue un contenedor ya que en su código son elementos secundarios del
body
y no sabe cuál es el
last-child
o el
first-child
del
body
ya que puede tener otros elementos como etiquetas de
script
u otras etiquetas agregadas dinámicamente
( como en el fragmento aquí o con jsfiddle o cualquier otra herramienta de codificación en línea)
.
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Aquí hay una captura de pantalla para mostrar lo que hay dentro de su cuerpo cuando ejecuta el fragmento:
Como puede notar claramente, hay un
div
agregado al final que es
el
last-child
del
body
.
Agregar un contenedor te evitará lidiar con configuraciones aleatorias y elementos ocultos agregados.
Si no desea dejar que todos esos divs entren en otra estructura, debe usar
first-of-type
y
last-of-type
lugar de
first-child
y
last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
Como señaló , esta solución es arbitraria y puede no funcionar en todas las situaciones. Como se muestra, no funciona correctamente en el fragmento de código, pero sí funciona en JSFiddle, por ejemplo. IE https://jsfiddle.net/vm1scerv/