Selector de CSS para el primer elemento con clase

Tengo un montón de elementos con un nombre de clase red, pero parece que no puedo seleccionar el primer elemento con el class="red" usando la siguiente regla CSS:

.home .red:first-child {
    border: 1px solid red;
}
<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

¿Qué está mal en este selector y cómo lo corrijo para apuntar al primer niño con clase? red?

preguntado el 26 de abril de 10 a las 19:04

Creo que así es como el selector: primer hijo debemos he trabajado... -

: primer hijo no sería un muy buen nombre entonces. Si tuvieras un hijo y luego una hija, no llamarías a tu hija tu primogénita. De manera similar, el primer .home> .red no es el primer hijo de .home, por lo que sería inapropiado llamarlo así. -

No, así es como debería haber funcionado: first-of-type -

@EvanThompson Así es como :first-of-type trabaja. -

: primero de tipo /: n-ésimo de tipo selecciona el primer / n-ésimo TAG coincidente. OP quería seleccionar la primera CLASE coincidente que sería más útil en general. Pero realmente si la especificación dependiera de mí, sería el primer selector coincidente de cualquier tipo. '.home> p: first-of-type' seleccionaría el primero en .home, '.home> .red: first-of-type' seleccionaría el primer .red bajo .home, y '.home> p.red:first-of-type' seleccionaría el primero bajo .home. -

20 Respuestas

Este es uno de los ejemplos más conocidos de autores que malinterpretan cómo :first-child obras. Introducido en CSS2, la :first-child la pseudoclase representa el primer hijo de su padre. Eso es. Existe una idea errónea muy común de que recoge el elemento secundario que sea el primero en coincidir con las condiciones especificadas por el resto del selector compuesto. Debido a la forma en que funcionan los selectores (ver aquí para una explicación), eso simplemente no es cierto.

El nivel de selectores 3 introduce un :first-of-type pseudoclase, que representa el primer elemento entre los hermanos de su tipo de elemento. Esta respuesta explica, con ilustraciones, la diferencia entre :first-child y :first-of-type. Sin embargo, como con :first-child, no tiene en cuenta otras condiciones o atributos. En HTML, el tipo de elemento está representado por el nombre de la etiqueta. En la pregunta, ese tipo es p.

Desafortunadamente, no hay similar :first-of-class pseudoclase para hacer coincidir el primer elemento hijo de una clase determinada. En el momento en que se publicó esta respuesta por primera vez, el recién publicado FPWD de Selectors nivel 4 introdujo un :nth-match() pseudoclase, diseñado en torno a la mecánica del selector existente, como mencioné en el primer párrafo, agregando un argumento de lista de selectores, a través del cual puede proporcionar el resto del selector compuesto para obtener el comportamiento de filtrado deseado. En los últimos años esta funcionalidad fue subsumido en :nth-child() sí mismo, con la lista de selección que aparece como un segundo argumento opcional, para simplificar las cosas y evitar la falsa impresión de que :nth-match() coinciden en todo el documento (consulte la nota final a continuación).

Mientras esperamos compatibilidad con varios navegadores (en serio, han pasado casi 10 años y solo ha habido una implementación durante los últimos 5 de esos años), una solución que lea verou y desarrollé de forma independiente (¡ella lo hizo primero!) es aplicar primero los estilos deseados a todos tus elementos con esa clase:

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... luego "deshaga" los estilos de los elementos con la clase que ven después del primero, utilizando el combinador general de hermanos ~ en una regla primordial:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Ahora solo el primer elemento con class="red" tendrá un borde.

Aquí hay una ilustración de cómo se aplican las reglas:

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}
<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

  1. No se aplican reglas; no se representa ningún borde.
    Este elemento no tiene la clase red, por lo que se omite.

  2. Solo se aplica la primera regla; se representa un borde rojo.
    Este elemento tiene la clase red, pero no está precedido por ningún elemento con la clase red en su padre. Así no se aplica la segunda regla, solo la primera, y el elemento mantiene su borde.

  3. Se aplican ambas reglas; no se representa ningún borde.
    Este elemento tiene la clase red. También está precedido por al menos otro elemento con la clase red. Así se aplican ambas reglas, y la segunda border La declaración anula la primera, por lo que la "deshace", por así decirlo.

Como beneficio adicional, aunque se introdujo en Selectores 3, el combinador general de hermanos es bastante compatible con IE7 y versiones posteriores, a diferencia de :first-of-type y :nth-of-type() que solo son compatibles con IE9 en adelante. Si necesita una buena compatibilidad con el navegador, está de suerte.

De hecho, el hecho de que el combinador de hermanos sea el único componente importante en esta técnica, y Tiene un soporte de navegador increíble, hace que esta técnica sea muy versátil: puede adaptarla para filtrar elementos por otras cosas, además de los selectores de clases:

  • Puede usar esto para solucionar :first-of-type en IE7 e IE8, simplemente proporcionando un selector de tipo en lugar de un selector de clase (nuevamente, más sobre su uso incorrecto en la pregunta en una sección posterior):

     article > p {
         /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
     }
    
     article > p ~ p {
         /* Undo the above styles for every subsequent article > p */
     }
    
  • Puedes filtrar por selectores de atributos o cualquier otro selector simple en lugar de clases.

  • También puede combinar esta técnica primordial con pseudo-elementos aunque los pseudo-elementos técnicamente no son selectores simples.

Tenga en cuenta que para que esto funcione, necesitará saber de antemano cuáles serán los estilos predeterminados para sus otros elementos hermanos para que pueda anular la primera regla. Además, dado que esto implica anular reglas en CSS, no puede lograr lo mismo con un solo selector para usar con API de selectoreso Seleniolocalizadores de CSS.

En una nota final, tenga en cuenta que esta respuesta asume que la pregunta está buscando cualquier numero de primeros elementos secundarios que tienen una clase determinada. No hay una pseudoclase ni siquiera una solución CSS genérica para la enésima coincidencia de un selector complejo en todo el documento - La existencia de una solución depende en gran medida de la estructura del documento. jQuery proporciona :eq(), :first, :last y más para este propósito, pero tenga en cuenta de nuevo que funcionan de manera muy diferente a :nth-child() et al. Con la API de selectores, puede utilizar document.querySelector() para obtener la primera coincidencia:

var first = document.querySelector('.home > .red');

O usar document.querySelectorAll() con un indexador para elegir cualquier coincidencia específica:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Aunque .red:nth-of-type(1) solución en la respuesta original aceptada por Felipe Daubmeier obras (que fue escrito originalmente por Martyn pero eliminado desde), no se comporta de la forma esperada.

Por ejemplo, si solo desea seleccionar el p aquí:

<p class="red"></p>
<div class="red"></div>

... entonces no puedes usar .red:first-of-type (equivalente a .red:nth-of-type(1)), porque cada elemento es el primero (y único) de su tipo (p y div respectivamente), entonces ambas será emparejado por el selector.

Cuando el primer elemento de cierta clase es también el primero de su tipo, la pseudoclase funcionará, pero esto sucede solo por casualidad. Este comportamiento se demuestra en la respuesta de Philip. En el momento en que inserte un elemento del mismo tipo antes de este elemento, el selector fallará. Tomando el marcado de la pregunta:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Aplicar una regla con .red:first-of-type funcionará, pero una vez que agregue otro p sin la clase:

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

... el selector fallará inmediatamente, porque el primer .red elemento es ahora el segundo p elemento.

Respondido 02 Abr '21, 10:04

Entonces, ¿hay alguna forma de emular :last-of-class? Seleccione el último elemento de una clase. - Cohete Hazmat

@Rocket: No es que pueda ver :( - BoltClock ♦

@Gnuey: Eso es porque los combinadores son lineales. Es un poco difícil de explicar en un comentario, pero básicamente diría que el primero > p implica que el segundo p es hijo de lo mismo article por medio del combinador de hermanos, por lo que reemplazando ese segundo p con article funciona de manera similar, y lo siguiente > p atraviesa un nivel adicional hacia abajo desde ese punto. Tengo un par de otras respuestas que lo explican con mucho mayor detalle: stackoverflow.com/a/3851754 stackoverflow.com/a/8135729 - BoltClock ♦

Buena técnica con el hermano. Vale la pena señalar que esto también funciona con varios combinadores hermanos, por ejemplo, p ~ p ~ p seleccionará el tercer elemento y más allá: jsfiddle.net/zpnnvedm/1 - Legolas

Según Puedo usar el :nth-child(1 of .foo) La extensión ya se ha implementado en Safari 9.1+. (Aunque no lo he comprobado) - danield

Las :first-child El selector está destinado, como dice el nombre, a seleccionar el primer hijo de una etiqueta principal. Entonces este ejemplo funcionará (solo lo probé aquí):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Sin embargo, esto no funcionará si ha anidado sus etiquetas bajo diferentes etiquetas principales o si sus etiquetas de clase red no son las primeras etiquetas debajo del padre.

Tenga en cuenta también que esto no solo se aplica a la primera etiqueta de este tipo en todo el documento, sino cada vez que se envuelve un nuevo padre, como:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first y third entonces será rojo.

Para su caso, puede utilizar el :nth-of-type selector:

.red:nth-of-type(1)
{
    border:5px solid red;
} 
<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Créditos a Martyn, quien eliminó su respuesta que contiene este enfoque. Más información por ejemplo aquí. Tenga en cuenta que se trata de un selector de CSS 3, por lo que no todos los navegadores lo reconocerán (por ejemplo, IE8 o anterior).

respondido 13 mar '21, 15:03

Me confundí un poco al leer esto. Estrictamente .red:nth-of-type(1) seleccionará cualquier elemento que (a) sea el primer hijo de su tipo de elemento, y (b) tenga la clase "rojo". Entonces, si, en el ejemplo, el primer no tenía la clase "rojo", no se seleccionaría. Alternativamente, si el y el primero ambos tenían clase "rojo", ambos serían seleccionados. jsfiddle.net/fvAxn - David

Lo que @David dijo hace un par de meses es correcto; :nth-of-type() no es una buena solución para esto. Proporcioné una respuesta alternativa que debería ser más confiable y, como beneficio adicional, funciona en IE7 +, a diferencia de :nth-of-type(). - BoltClock ♦

@Dan Mundy: :first-of-type es equivalente a :nth-of-type(1), así que, por supuesto, también funciona. También puede fallar, también, de la misma manera por la misma razón que se indica en mi respuesta. - BoltClock ♦

@David estoy seguro :nth-of-type significa "elemento / etiqueta" cuando dice "tipo". Entonces solo considera el elemento, no cosas como clases. - campbell

@gcampbell: Sí, eso es exactamente lo que significa, y es por eso que esta respuesta es defectuosa. La razón por la que se eligió la palabra "tipo" es para no acoplar los selectores con HTML / XML, ya que no todos los lenguajes tienen un concepto de "etiquetas" que definen elementos. - BoltClock ♦

La respuesta correcta es:

.red:first-child, :not(.red) + .red { border:5px solid red }

Parte I: Si el elemento es el primero de su padre y tiene la clase "rojo", obtendrá un borde.
Parte II: Si el elemento ".red" no es el primero de su padre, sino que sigue inmediatamente a un elemento sin clase ".red", también merecerá el honor de dicho borde.

Violín o no sucedió.

La respuesta de Philip Daubmeier, aunque aceptada, no es correcta; consulte el violín adjunto.
La respuesta de BoltClock funcionaría, pero define y sobrescribe estilos innecesariamente
(particularmente un problema en el que de lo contrario heredaría un borde diferente; no desea declarar otro en el borde: ninguno)

EDITAR: En el caso de que tenga "rojo" después de que no sea rojo varias veces, cada "primer" rojo obtendrá el borde. Para evitar eso, sería necesario usar la respuesta de BoltClock. Ver violín

respondido 15 nov., 16:13

Esta respuesta no es incorrecta, el selector is correcto para el marcado dado, pero debo reiterar que la situación mencionada en la edición es la razón por la que afirmo que una anulación es necesaria al menos cuando no se puede garantizar la estructura de marcado, solo porque un .red sigue a :not(.red) no siempre lo convierte en el primero .red entre sus hermanos. Y si la frontera necesita ser heredada, es simplemente una cuestión de declarar border: inherit en lugar de border: none en la regla de anulación. - BoltClock ♦

Esta solución es la mejor OMI porque puede hacer lo mismo fácilmente con el último hijo. - A1rPun

@ A1rPun ¿Cómo se cambia esto para el último hijo? - Willem

@Willem Solo cambia first-child a last-child, pero veo después de probar que esto no siempre funciona. - A1rPun

Lo siento, pero no coincide con el "primer elemento secundario que tiene la clase .red", sino que coincide con el "primer elemento si tiene la clase .red y el primer elemento .red después de un elemento que no es .red". Estos dos no son equivalentes. Violín: jsfiddle.net/Vq8PB/166 - Gunchars

podrías usar first-of-type or nth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Respondido el 13 de enero de 17 a las 00:01

No funcionará si tiene un <p></p> entre las span y tu primera p elemento con red clase. Mira este JSFiddle. - Francisco Romero

Vi ahora que reproduce en el último ejemplo de su respuesta el mismo comportamiento que señalé aquí. Cuando probé tu ejemplo y "jugué" un poco, noté ese comportamiento y quise señalar para que los futuros lectores estén al tanto. - Francisco Romero

Las respuestas anteriores son demasiado complejas.

.class:first-of-type { }

Esto seleccionará el primer tipo de clase. Fuente MDN

Respondido el 28 de junio de 18 a las 14:06

No puedo encontrar ninguna referencia al primer tipo, y el primer tipo solo se aplica al nombre de la etiqueta; ¿Estás seguro de que esta respuesta es correcta? - Brocha mate

first-type ha sido renombrado a first-of-type - Feria Gabriel

No funciona con clases. Asi es como es debemos funciona, porque seleccionar el n-ésimo de una clase sería más útil que seleccionar el n-ésimo de una etiqueta. Pero ': first-of-type' solo ha funcionado con tagName. Si sucede que 'first-of-class' y 'first-of-tag' se refieren al mismo elemento, lo que a menudo hacen, es fácil confundirse pensando que funciona de esa manera; y luego preguntarse qué está roto cuando se llega a un caso en el que no lo hacen. - evan thompson

@Bernesto, cuando tienes un caso en el que tienes varios elementos del mismo "tipo", digamos <span>, y algunos tienen la clase highlight. .highlight:first-of-type selector seleccionará la primera instancia del "tipo" con la clase seleccionada, en este ejemplo la primera <span>, y no la primera instancia de la clase highlight. Solo si esa primera instancia de span también tiene el resaltado de clase, se implementará el estilo. (codepen.io/andrewRmillar/pen/poJKJdJ) - Sl4rtib4rtf4st

Dado que las otras respuestas cubren lo que Mal con él, probaré la otra mitad, cómo solucionarlo. Desafortunadamente, no sé si tienes un Solo CSS solución aquí, al menos no que yo pueda pensar en. Sin embargo, hay otras opciones ...

  1. Asignar un first class al elemento cuando lo generas, así:

    <p class="red first"></p>
    <div class="red"></div>
    

    CSS:

    .first.red {
      border:5px solid red;
    }
    

    Este CSS solo coincide con elementos con ambas first y red clases.

  2. Alternativamente, haga lo mismo en JavaScript, por ejemplo, esto es lo que jQuery usaría para hacer esto, usando el mismo CSS que el anterior:

    $(".red:first").addClass("first");
    

Respondido el 26 de junio de 12 a las 00:06

Se me ocurrió una solución solo de CSS Hace un tiempo; Lo he reproducido aquí como una respuesta canónica. - BoltClock ♦

Mientras no haya nada como :first-of-class, También sugeriría agregar una clase adicional al primer elemento. Parece la solución más sencilla por ahora. - Avatar

Para que coincida con su selector, el elemento debe tener un nombre de clase de red y debe ser el primer hijo de su padre.

<div>
    <span class="red"></span> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"></p> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></p></div> <!-- MATCH -->
</div>

Respondido 27 Feb 21, 00:02

Conseguí este en mi proyecto.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}
<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

Respondido el 31 de enero de 18 a las 07:01

Según su problema actualizado

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

qué tal si

.home span + .red{
      border:1px solid red;
    }

Esto seleccionará casa de clase, luego el elemento lapso y finalmente todo elementos .red que se colocan inmediatamente después de los elementos de tramo.

Referencia: http://www.w3schools.com/cssref/css_selectors.asp

Respondido el 21 de enero de 14 a las 11:01

Estoy usando CSS a continuación para tener una imagen de fondo para la lista ul li

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}
<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Respondido el 18 de junio de 18 a las 16:06

Puede usar nth-of-type (1) pero asegúrese de que el sitio no necesita ser compatible con IE7, etc., si este es el caso, use jQuery para agregar la clase de cuerpo, luego busque el elemento a través de la clase de cuerpo de IE7, luego el nombre del elemento, luego agregue en el estilo nth-child.

Respondido el 03 de junio de 13 a las 13:06

Puede cambiar su código a algo como esto para que funcione

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Esto hace el trabajo por ti

.home span + .red{
      border:3px solid green;
    }

Aquí hay una referencia de CSS de SnoopCode sobre eso.

Respondido 14 Oct 15, 11:10

Por alguna razón, ninguna de las respuestas anteriores parecía abordar el caso de el verdadero primero y único primer hijo del padre.

#element_id > .class_name:first-child

Todas las respuestas anteriores fallarán si desea aplicar el estilo solo al niño de primera clase dentro de este código.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

Respondido el 18 de junio de 18 a las 16:06

Su respuesta ya está contenida esencialmente en las dos respuestas más altas a esta pregunta y no agrega nada. Además, su uso del :first-child pseudo-clase es engañosa ya que agrega .class_name antes de que no cambie la forma en que funciona y simplemente lo hace actuar como un filtro. Si tienes un div antes <div class="class_name">First content that need to be styled</div> entonces su selector no coincidiría ya que no es el primer hijo real. - j08691

No creo que sea tan sencillo para alguien que necesita la información. Y sí, tienes razón sobre el caso. Esto sirve para un caso más específico. Por eso pensé que podría ser útil. - Yavor Ivanov

Esto es exactamente lo que necesitaba, preciso y conciso. Gracias @YavorIvanov - Quantme

Pruebe esto simple y efectivo

 .home > span + .red{
      border:1px solid red;
    }

Respondido 26 Jul 16, 09:07

¿Podrías probar algo como esto?

.red:first-of-type {
    border: 5px solid red;
}

también puede usar esto para el último elemento (si lo necesita):

.red:last-of-type {
    border: 5px solid red;
}

Respondido el 18 de Septiembre de 20 a las 08:09

Con todo, después de leer toda esta página y otras y mucha documentación. Aquí está el resumen:

  • Para en el primer/pasado niño: seguro de usar ahora (compatible con todos los navegadores modernos)
  • : n-ésimo hijo () También es seguro de usar ahora (compatible con todos los navegadores modernos). ¡Pero ten cuidado, incluso cuenta a los hermanos! Entonces, lo siguiente no funcionará correctamente:

/* This should select the first 2 element with class display_class
* but it will NOT WORK Because the nth-child count even siblings 
* including the first div skip_class
*/
.display_class:nth-child(-n+2){ 
    background-color:green; 
}
<ul>
   <li class="skip_class">test 1</li>
   <li class="display_class">test 2 should be in green</li>
   <li class="display_class">test 3 should be in green</li>
   <li class="display_class">test 4</li>
 </ul>

Actualmente, hay una selector: nth-child (-n + 2 de .foo) que admite la selección por clase, pero no es compatible con los navegadores modernos, por lo que no es útil.

Entonces, eso nos deja con la solución de Javascript (arreglaremos el ejemplo anterior):

// Here we'll go through the elements with the targeted class
// and add our classmodifer to only the first 2 elements!


[...document.querySelectorAll('.display_class')].forEach((element,index) => {
  if (index < 2) element.classList.add('display_class--green');
});
.display_class--green {
    background-color:green;
}
<ul>
   <li class="skip_class">test 1</li>
   <li class="display_class">test 2 should be in green</li>
   <li class="display_class">test 3 should be in green</li>
   <li class="display_class">test 4</li>
 </ul>

Respondido 22 Oct 20, 00:10

Creo que usando selector relativo + para seleccionar elementos colocados inmediatamente después, funciona aquí mejor (como pocos sugirieron antes).

También es posible para este caso utilizar este selector

.home p:first-of-type

pero este es el selector de elementos, no la clase uno.

Aquí tienes una buena lista de selectores CSS: https://kolosek.com/css-selectors/

Respondido 11 Abr '18, 07:04

Prueba esta solución:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}
<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Enlace CodePen

Respondido el 18 de junio de 18 a las 16:06

La pregunta es "Selector de CSS para el primer elemento con clase"no"Selector de CSS para el primer elemento con nombre de etiqueta". - Geroldo Broser

Creo que mucha gente ya lo ha explicado. su código está seleccionando solo el primer hijo de la primera instancia. Si desea seleccionar todos los primeros hijos de la clase roja, debe usar

.home > .red:first-child {
    /* put your styling here */
}

Respondido 17 Feb 21, 01:02

Acabo de usar :first como selector de CSS con éxito.

.red:first

respondido 24 nov., 20:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.