Usando: último hijo con selector de clase

Question

Usando: último hijo con selector de clase

Quiero estilizar 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>

Ni

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

Ni

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

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

Update: Oops, totally forgot el jsfiddle.

29

css css3

Author: Znarkus, 2011-10-07

Source

3 answers

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

2 significa que sabes cuántos de

están después de tu

en nuestro caso es el segundo desde abajo.

5

Author: boo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-10 14:36:32

Esto es porque li.heading no es el último hijo ni es el segundo hijo. Es el primer y cuarto hijo de la ul

Pruebe esto:

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

4

Author: Jrod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-07 13:06:26

score 29 · Accepted Answer

Su declaración fue: "Quiero estilizar 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 su pensamiento, pero el lis con la clase "encabezamiento" no es el segundo o último hijo.