Selector de CSS para el primer elemento con clase

1129

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"uso de 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?

5
  • 8
    Creo que así es como debería haber funcionado el selector: primer hijo ... 5 de junio de 2014 a las 4:05
  • 35
    : 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í.
    BoltClock
    10 de septiembre de 2014 a las 4:15
  • 3
    No, así es como debería haber funcionado: first-of-type 20/09/19 a las 17:04
  • 1
    @EvanThompson Así es como :first-of-type lo hace el trabajo.
    TylerH
    25/03/20 a las 13:17
  • 5
    : 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 primer <p> en .home, '.home> .red: first-of-type' seleccionaría el primer .red bajo .home, y '.home > p.red:first-of-type 'seleccionaría el primer <p class = "red"> debajo de .home. 26 mar.20 a las 18:03
1632

Este es uno de los ejemplos más conocidos de autores que malinterpretan cómo :first-childfunciona. Introducida en CSS2 , la :first-childpseudoclase representa el primer hijo de su padre . Eso es todo. 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 (consulte aquí para obtener una explicación), eso simplemente no es cierto.

El nivel de selectores 3 introduce una :first-of-typepseudoclase , que representa el primer elemento entre los hermanos de su tipo de elemento. Esta respuesta explica, con ilustraciones, la diferencia entre :first-childy :first-of-type. Sin embargo, al igual que con :first-child, no considera ninguna otra condición o atributo. En HTML, el tipo de elemento está representado por el nombre de la etiqueta. En la pregunta, ese tipo es p.

Desafortunadamente, no existe una :first-of-classpseudoclase similar para hacer coincidir el primer elemento hijo de una clase determinada. En el momento en que esta respuesta fue publicada en primer lugar, la FPWD recién publicada de nivel Selectores 4 introdujo una :nth-match()pseudo-clase , diseñado en torno a la mecánica del selector existente como he mencionado en el primer párrafo mediante la adición de un argumento de selección de vinos, a través del cual se puede suministrar el resto del selector de compuestos para obtener el comportamiento de filtrado deseado. En los últimos años, esta funcionalidad se incorporó a :nth-child()sí misma , con la lista de selección que aparece como un segundo argumento opcional, para simplificar las cosas y evitar la falsa impresión que :nth-match()coincide en todo el documento (consulte la nota final a continuación).

Mientras esperamos la 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 yo desarrollamos de forma independiente (¡ella lo hizo primero!) Es para aplicar primero sus estilos deseados a todos sus 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 viene después de la primera , usando el combinador de hermanos general~ 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 reden 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 de la clase red. Por lo tanto, se aplican ambas reglas y la segunda borderdeclaración anula la primera, "deshaciéndola", por así decirlo.

Como beneficio adicional, a pesar de que se introdujo en los selectores 3, el combinador en general entre hermanos es realmente muy bien soportado por Internet Explorer 7 y versiones posteriores, a diferencia :first-of-typey :nth-of-type()que sólo 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 hermano es el único componente importante en esta técnica, y tiene un soporte de navegador tan asombroso, 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 trabajar :first-of-typeen 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 */
     }
    
  • Puede 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 la API de selectores o los localizadores de CSS de Selenium .

En una nota final, tenga en cuenta que esta respuesta asume que la pregunta busca cualquier número de primeros elementos secundarios que tengan una clase determinada. No existe una pseudoclase ni siquiera una solución CSS genérica para la enésima coincidencia de un selector complejo en todo el documento ; si existe una solución depende en gran medida de la estructura del documento. jQuery proporciona :eq(), :first, :lasty más para este propósito, pero de nuevo nota que funcionan de manera muy diferente a partir de :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 utilícelo 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 la .red:nth-of-type(1)solución en la respuesta original aceptada por Philip Daubmeier funciona (que fue escrita originalmente por Martyn pero eliminada desde entonces), no se comporta de la manera esperada .

Por ejemplo, si solo desea seleccionar paquí:

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

... entonces no puede usar .red:first-of-type(equivalente a .red:nth-of-type(1)), porque cada elemento es el primero (y único) de su tipo ( py divrespectivamente), por lo que ambos serán emparejados por el selector.

Cuando el primer elemento de una determinada clase es también el primero de su tipo , la pseudoclase funcionará, pero esto sucede solo por coincidencia . 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>

La aplicación de una regla con .red:first-of-typefuncionará, pero una vez que agregue otra psin 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 .redelemento es ahora el segundo p elemento.

7
  • 25
    Entonces, ¿hay alguna forma de emular :last-of-class? Seleccione el último elemento de una clase. 4 de mayo de 2012 a las 22:08
  • 1
    @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 > pimplica que el segundo pes un hijo del mismo articlea través del combinador de hermanos, por lo que reemplazar ese segundo pcon articlefunciona de manera similar, y el siguiente > patraviesa un nivel adicional hacia abajo desde ese punto. Tengo un par de otras respuestas que lo explican con mucho más detalle: stackoverflow.com/a/3851754 stackoverflow.com/a/8135729
    BoltClock
    30 de agosto de 2014 a las 4:01
  • 4
    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
    15/04/15 a las 13:53
  • 1
    @Danield: Sí, lo ha hecho. Safari 9 se envía con una serie de funciones de selectores-4. Consulte también stackoverflow.com/questions/35993727/…
    BoltClock
    14 de septiembre de 2016 a las 6:57
  • 1
    @ElRoBe: Eso requiere asumir que el primer p.red siempre seguirá directamente un tramo. A veces, es posible que no pueda hacer suposiciones sobre el marcado porque puede variar de ciertas maneras. Por ejemplo, es posible que ese intervalo no siempre esté allí, es posible que el primer p.red no lo siga directamente, o puede haber más de un par span + p.red en el mismo padre y solo desea que el primero se vea afectado. Pero si eres capaz de hacer estas suposiciones o incluso garantías sobre el marcado, a continuación, estas soluciones simples estarán disponibles para usted.
    BoltClock
    5/03/19 a las 16:50
359

El :first-childselector está destinado, como dice el nombre, a seleccionar el primer hijo de una etiqueta principal. Entonces este ejemplo funcionará (Solo 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 redno son las primeras etiquetas debajo de la principal.

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>

firsty thirdserá rojo entonces.

Para su caso, puede utilizar el :nth-of-typeselector:

.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 contenía 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).

12
  • 28
    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 <p> no tuviera la clase "rojo", no se seleccionaría. Alternativamente, si el <span> y el primer <p> ambos tuvieran clase "rojo", ambos serían seleccionados. jsfiddle.net/fvAxn
    David
    12/10/11 a las 22:51
  • 1
    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
    16/12/11 a las 19:32
  • 7
    @Dan Mundy: :first-of-typees 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
    13 feb 2013 a las 20:19
  • 5
    @David Estoy seguro de que :nth-of-typesignifica "elemento / etiqueta" cuando dice "tipo". Entonces solo considera el elemento, no cosas como clases. 29/06/2016 a las 17:42
  • 4
    @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
    6 de julio de 2017 a las 3:29
85

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
(en particular, un problema en el que, de lo contrario, heredaría un borde diferente; no desea declarar otro para border: none)

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

1
  • 3
    Esta respuesta no es incorrecta, el selector es 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 es necesario un reemplazo al menos cuando no se puede garantizar la estructura del marcado, solo porque un .redsigue a :not(.red)no siempre lo convierte en el primero .redentre sus hermanos. Y si es necesario heredar el borde, es simplemente una cuestión de declarar en border: inheritlugar de border: noneen la regla de anulación.
    BoltClock
    26 feb 2013 a las 17:08
20

podrías usar first-of-typeonth-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>
1
  • 8
    No funcionará si tiene <p></p>entre el spany su primer pelemento con redclase. Mira este JSFiddle . 21/11/2017 a las 14:48
14

Las respuestas anteriores son demasiado complejas.

.class:first-of-type { }

Esto seleccionará el primer tipo de clase. Fuente MDN

Nota: probado con Chrome 91 y Firefox 89, junio de 2021.

6
  • 4
    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? 10/10/2017 a las 18:58
  • 1
    first-type ha sido renombrado a first-of-type 28/06/18 a las 13:54
  • dieciséis
    No funciona con clases. Así es como debería funcionar, porque seleccionar el enésimo de una clase sería más útil que seleccionar el ené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. 20/09/19 a las 17:05
  • 1
    @Bernesto, cuando tienes un caso en el que tienes varios elementos del mismo "tipo", digamos <span>, y algunos tienen la clase highlight. El .highlight:first-of-typeselector 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 ) 17 mar.20 a las 14:58
  • 1
    La razón por la que mi respuesta es tan compleja es porque su sección final, así como mis comentarios sobre varias de las otras respuestas, explica precisamente por qué tiene fallas . Agregar un enlace a MDN a su respuesta dos años después del hecho no hace exactamente nada para respaldarlo cuando no ha intentado relacionar el material de MDN con él, presumiblemente porque no puede.
    BoltClock
    11 de mayo a las 15:38
10

Para que coincida con su selector, el elemento debe tener un nombre de clase de redy 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>
0
9

Dado que las otras respuestas cubren lo que está mal , intentaré la otra mitad, cómo solucionarlo. Desafortunadamente, no sé si tiene una solución de CSS única aquí, al menos no que se me ocurra . Sin embargo, hay otras opciones ...

  1. Asigne una firstclase al elemento cuando lo genere, así:

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

    CSS:

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

    Este CSS sólo coincide con elementos tanto first y redclases.

  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");
    
2
  • Se me ocurrió una solución CSS sólo hace un tiempo ; Lo he reproducido aquí como una respuesta canónica.
    BoltClock
    16/12/11 a las 19:22
  • 1
    Siempre que no haya nada parecido :first-of-class, también sugeriría agregar una clase adicional al primer elemento. Parece la solución más sencilla por ahora.
    Avatar
    26 de septiembre de 2017 a las 12:00
8

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>
1
  • No necesita: no (: primer hijo) al aplicar la técnica en mi respuesta. El combinador ~ implica que: not (: first-child) siempre coincidirá y, por lo tanto, es redundante: el único efecto que realmente tiene en su selector es la especificidad adicional. Y no necesita esta especificidad adicional, por lo que puede (y probablemente debería) omitirla.
    BoltClock
    11 de mayo a las 15:32
4

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á la clase home , luego el elemento span y finalmente todos los elementos .red que se colocan inmediatamente después de los elementos span.

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

4

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>
3

Me sorprende que nadie haya mencionado la solución más limpia:

.red:not(.red ~ .red) {
    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>
3
  • 1
    ¡Eso es magnífico!
    mtness
    30 de agosto a las 14:22
  • Explique cómo funciona 15 de septiembre a las 6:57
  • A .redque no es un " .redprecedido de un .red". Solo el primero está en este ejemplo. Pero no funcionará si se inserta otra clase en el medio. Nota: también .red:not(.red ~ *)debería funcionar ("una redque no está" anythingprecedida de una .red")
    hl037_
    15 de septiembre a las 17:40
2

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 CSS de SnoopCode sobre eso.

2

Por alguna razón, ninguna de las respuestas anteriores parecía abordar el caso del primer y único primer hijo real 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>
1
  • 1
    La razón por la que nuestras respuestas no abordaron esto es porque no es con lo que la pregunta estaba preguntando al principio. Esta respuesta serviría mejor como respuesta a una pregunta separada.
    BoltClock
    11 de mayo a las 15:29
1

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.

0

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

  • Para el primer / último hijo: seguro de usar ahora (compatible con todos los navegadores modernos)
  • : nth-child () 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 un 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>
-1

Pruebe esto simple y efectivo

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

Creo que usar un 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/

-4

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

1
  • 3
    La pregunta es " selector de CSS para el primer elemento con clase ", no " selector de CSS para el primer elemento con nombre de etiqueta ". 29/12/19 a las 10:59
-4

¿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;
}
-5

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 */
}