Entiendo que puedo apuntar al último elemento si están usando la misma clase o si son el mismo elemento. Pero la forma en que estoy construyendo es que el usuario pondrá cualquier elemento dentro del (vea el ejemplo adjunto). Me pregunto si todavía es posible llamar por CSS. o eso será algo que CSS no puede hacer?
.header p:last-of-type{
color: red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
</div>
3 respuestas
Sí, con last-child
y .header p:last-child
apuntará al último hijo si es un elemento <p> </p>
y si desea apuntar al último elemento en un div que tenga un .header
como clase.
Puede usar .header *:last-child
como mención en la sección de comentarios por @ Chris G
.header *:last-child {
color: red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
<p>ddd</p>
</div>
Si está tratando de agregar un estilo color: red;
a la última etiqueta <p>
dentro de la última clase class='header'
, entonces debe usar Selectores CSS :
CSS:
.header:last-of-type p:last-of-type {
color: red;
}
Puede verificar esta muestra de código de trabajo .
Editar:
Si desea orientar el último elemento de cada etiqueta con class='header'
, puede lograrlo así:
CSS:
.header *:last-child {
color: red;
}
Compruebe el muestra de código de trabajo .
Probar esto
.header *:last-child{
color : red;
}
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>something</p>
<p>something</p>
<button>last one - red</button>
</div>
<div class="header">
<h1>I am numbe one</h1>
<h3>number two</h3>
<p>last one - red</p>
</div>
<div class="header">
<p>number 1</p>
<h1>something</h1>
<h3>last one - red</h3>
</div>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.