¿Es posible apuntar al último elemento dentro de una clase div? CSS

Question

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>

javascript html css css-selectors

3

Yan Mak 2 oct. 2019 a las 21:07

Answer 1

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>

3

Taki 2 oct. 2019 a las 18:28

Answer 2

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 .

3

Manuel Abascal 2 oct. 2019 a las 18:27

Answer 3

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>

0

rahul varma 2 oct. 2019 a las 18:19

¿Es posible apuntar al último elemento dentro de una clase div? CSS

3 respuestas

Nuevas preguntas

javascript