css - fit - Usando: last-child con selector de clase

display grid can i use

Question

Quiero .heading el último / segundo .heading .

<ul>
    <li class="heading">Hello world</li>
    <li>Hello world</li>
    <li>Hello world</li>
    <li class="heading">Hello world</li>
    <li>Hello world</li>
</ul>

Ninguno

ul li.heading:last-child {
    background: black;
}

ni

ul li.heading:nth-child(2) {
    background: black;
}

funciona para mi. ¿Por qué y cómo puedo aplicar estilos a ese <li> ? Parece que los selectores de pseudo-clase no funcionan con los selectores de clase. Lo cual es raro ya que podría haber jurado que lo había usado antes.

Actualización: Vaya, olvidé totalmente el jsfiddle .

Answer 1

Esto se debe a que li.heading no es el último hijo ni es el segundo hijo. Es el primer y cuarto hijo de la ul

Prueba esto:

  ul li.heading:nth-child(4) {
    background: black;
}

Answer 2

Su declaración fue: "Quiero diseñar el último / segundo encabezado".

Eso significaría que tendrías que escribir tu código así:

<ul>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
</ul>

Y el CSS:

ul li.heading:last-child {
    background: black;
}
ul li.heading:nth-child(2) {
    background: black;
}

De lo contrario, con su código html actual, escribiría:

ul li.heading:nth-child(4) {
    background: black;
}
ul li.heading:nth-child(1) {
    background: black;
}

Entiendo tu pensamiento, pero la lis con el "encabezado" de clase no es el segundo ni el último hijo.

Answer 3

ul li.heading:nth-last-child(2)

2 significa que sabes cuántos de <li> están después de tu <li class = "heading"> en nuestro caso, es el segundo desde abajo.