Sélecteur CSS pour le premier élément avec la classe

J'ai un tas d'éléments avec un nom de classe red, mais je n'arrive pas à sélectionner le premier élément avec la class="red"règle CSS suivante:

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

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

Qu'est-ce qui ne va pas dans ce sélecteur et comment le corriger?

Grâce aux commentaires, j'ai compris que l'élément devait être le premier enfant de son parent à être sélectionné, ce qui n'est pas le cas pour moi. J'ai la structure suivante, et cette règle échoue comme mentionné dans les commentaires:

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

Comment puis-je cibler le premier enfant avec la classe red?

Il s'agit de l'un des exemples les plus connus d'auteurs mal compris le :first-childfonctionnement.Introduite en CSS2 , la :first-childpseudo-classe représente le tout premier enfant de son parent . C'est ça. Il y a une idée fausse très répandue selon laquelle il ramasse l'élément enfant qui est le premier à correspondre aux conditions spécifiées par le reste du sélecteur composé. En raison du fonctionnement des sélecteurs (voir ici pour une explication), ce n'est tout simplement pas vrai.

Les sélecteurs de niveau 3 introduisent une :first-of-typepseudo-classe , qui représente le premier élément parmi les frères et sœurs de son type d'élément. Cette réponse explique, avec des illustrations, la différence entre :first-childet :first-of-type. Cependant, comme avec :first-child, il ne regarde aucune autre condition ou attribut. En HTML, le type d'élément est représenté par le nom de la balise. Dans la question, ce type est p.

Malheureusement, il n'y a pas de :first-of-classpseudo-classe similaire pour faire correspondre le premier élément enfant d'une classe donnée. Une solution de contournement Lea Verou et moi avons trouvée pour cela (bien que de manière totalement indépendante) consiste à appliquer d'abord les styles souhaités à tous vos éléments avec cette classe:

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

... puis "annuler" les styles des éléments avec la classe qui vient après le premier , en utilisant le combinateur frère général~ dans une règle prioritaire:

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

Maintenant, seul le premier élément avec class="red" aura une bordure.

Voici une illustration de la façon dont les règles sont appliquées:

<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. Aucune règle n'est appliquée; aucune bordure n'est rendue.
   Cet élément n'a pas de classe red, il est donc ignoré.

2. Seule la première règle est appliquée; une bordure rouge est rendue.
   Cet élément a la classered , mais il n'est précédé d'aucun élément avec la classe reddans son parent. Ainsi la deuxième règle n'est pas appliquée, seulement la première, et l'élément garde sa frontière.

3. Les deux règles sont appliquées; aucune bordure n'est rendue.
   Cet élément a la classe red. Il est également précédé d'au moins un autre élément de la classe red. Ainsi, les deux règles sont appliquées et la deuxième borderdéclaration l'emporte sur la première, la "défaisant" pour ainsi dire.

En prime, bien qu'il ait été introduit dans Selectors 3, le combinateur général de frères et sœurs est en fait assez bien pris en charge par IE7 et plus récent, contrairement à :first-of-typeet :nth-of-type()qui ne sont pris en charge que par IE9. Si vous avez besoin d'une bonne prise en charge du navigateur, vous avez de la chance.

En fait, le fait que le combinateur frère soit le seul composant important dans cette technique, et qu'il ait une telle prise en charge du navigateur, rend cette technique très polyvalente - vous pouvez l'adapter pour filtrer les éléments par d'autres choses, en plus des sélecteurs de classe:

• Vous pouvez l'utiliser pour contourner :first-of-typeIE7 et IE8, en fournissant simplement un sélecteur de type au lieu d'un sélecteur de classe (encore une fois, plus d'informations sur son utilisation incorrecte ici dans une section ultérieure):

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

• Vous pouvez filtrer par sélecteurs d'attributs ou tout autre sélecteur simple au lieu de classes.

• Vous pouvez également combiner cette technique prioritaire avec des pseudo-éléments même si les pseudo-éléments ne sont techniquement pas de simples sélecteurs.

Notez que pour que cela fonctionne, vous devrez savoir à l'avance quels seront les styles par défaut pour vos autres éléments frères afin de pouvoir remplacer la première règle. De plus, comme cela implique de remplacer les règles en CSS, vous ne pouvez pas obtenir la même chose avec un seul sélecteur à utiliser avec l' API Selectors ou les localisateurs CSS de Selenium .

Il convient de mentionner que Selectors 4 introduit une extension de la :nth-child()notation (à l'origine une pseudo-classe entièrement nouvelle appelée:nth-match() ), qui vous permettra d'utiliser quelque chose comme :nth-child(1 of .red)au lieu d'une hypothétique.red:first-of-class . Étant une proposition relativement récente, il n'y a pas encore suffisamment d'implémentations interopérables pour qu'elle soit utilisable sur les sites de production. Espérons que cela changera bientôt. En attendant, la solution de contournement que j'ai suggérée devrait fonctionner pour la plupart des cas.

Gardez à l'esprit que cette réponse suppose que la question recherche chaque premier élément enfant ayant une classe donnée. Il n'y a ni pseudo-classe ni même une solution CSS générique pour la nième correspondance d'un sélecteur complexe à travers le document entier - si une solution existe dépend fortement de la structure du document. jQuery fournit :eq(), :first, :lastet plus à cet effet, mais notez encore que ils fonctionnent très différemment :nth-child()et al . En utilisant l'API Selectors, vous pouvez soit utiliser document.querySelector()pour obtenir la toute première correspondance:

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

Ou utilisez document.querySelectorAll()avec un indexeur pour choisir une correspondance spécifique:

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

Bien que la .red:nth-of-type(1)solution dans la réponse initialement acceptée par les travaux de Philip Daubmeier (qui a été Martyn mais supprimée depuis), elle ne se comporte pas comme vous vous y attendriez.

Par exemple, si vous souhaitez uniquement sélectionner le pdans votre balisage d'origine:

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

... alors vous ne pouvez pas utiliser .red:first-of-type(équivalent à .red:nth-of-type(1)), car chaque élément est le premier (et le seul) de son type ( pet divrespectivement), donc deux seront mis en correspondance par le sélecteur.

Lorsque le premier élément d'une certaine classe est également le premier de son type , la pseudo-classe fonctionnera, mais cela ne se produit que par coïncidence . Ce comportement est démontré dans la réponse de Philip. Au moment où vous collerez un élément du même type avant cet élément, le sélecteur échouera. Prendre le balisage mis à jour:

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

L'application d'une règle avec .red:first-of-typefonctionnera, mais une fois que vous en aurez ajouté une autre psans la classe:

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

... le sélecteur échouera immédiatement, car le premier .redélément est maintenant le deuxième p élément.

Le :first-childsélecteur est destiné, comme son nom l'indique, à sélectionner le premier enfant d'une balise parent. Les enfants doivent être intégrés dans la même balise parent. Votre exemple exact fonctionnera (venez de l'essayer ici ):

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

Peut-être que vous avez imbriqué vos tags dans différents tags parents? Vos balises de classe sont-elles redvraiment les premières balises sous le parent?

Notez également que cela ne s'applique pas uniquement à la première balise de ce type dans tout le document, mais à chaque fois qu'un nouveau parent est enroulé autour de lui, comme:

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

firstet thirdsera alors rouge.

Mise à jour:

Je ne sais pas pourquoi martyn a supprimé sa réponse, mais il avait la solution, le :nth-of-typesélecteur:

.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édits à Martyn . Plus d'infos par exemple ici . Sachez qu'il s'agit d'un sélecteur CSS 3, donc tous les navigateurs ne le reconnaîtront pas (par exemple IE8 ou plus ancien).

La bonne réponse est:

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

Partie I: Si l'élément est le premier à son parent et a la classe "rouge", il doit avoir une bordure.
Partie II: Si l'élément ".red" n'est pas le premier à son parent, mais suit immédiatement un élément sans classe ".red", il mérite également l'honneur de ladite bordure.

Violon ou ça n'est pas arrivé.

La réponse de Philip Daubmeier, bien qu'acceptée, n'est pas correcte - voir violon ci-joint.
La réponse de BoltClock fonctionnerait, mais définit et écrase inutilement les styles
(en particulier un problème où il hériterait autrement d'une bordure différente - vous ne voulez pas en déclarer d'autre à border: aucun)

EDIT: Dans le cas où vous avez "rouge" suivant plusieurs fois non rouge, chaque "premier" rouge obtiendra la bordure. Pour éviter cela, il faudrait utiliser la réponse de BoltClock. Voir violon

vous pourriez utiliser first-of-typeounth-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>

Les réponses ci-dessus sont trop complexes.

.class:first-of-type { }

Cela sélectionnera le premier type de classe. Source MDN

Pour correspondre à votre sélecteur, l'élément doit avoir un nom de classe redet doit être le premier enfant de son parent.

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

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

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

Étant donné que les autres réponses couvrent ce qui ne va pas, je vais essayer l'autre moitié, comment y remédier. Malheureusement, je ne sais pas si vous avez une seule solution CSS ici, du moins pas à laquelle je peux penser . Il existe cependant d'autres options ...

1. Attribuez une firstclasse à l'élément lorsque vous le générez, comme ceci:

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

   CSS:

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

   Ce CSS ne fait correspondre les éléments qu'aux deux first et aux redclasses.

2. Alternativement, faites la même chose en JavaScript, par exemple, voici ce que jQuery vous utiliseriez pour cela, en utilisant le même CSS que ci-dessus:

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

J'ai eu celui-ci dans mon projet.

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>

Selon votre problème mis à jour

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

que diriez-vous

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

Cela sélectionnera la classe home , puis la durée de l'élément et enfin tous les éléments .red qui sont placés immédiatement après les éléments de la portée.

Référence: http://www.w3schools.com/cssref/css_selectors.asp

Vous pouvez utiliser nth-of-type (1) mais assurez-vous que le site n'a pas besoin de prendre en charge IE7, etc., si tel est le cas, utilisez jQuery pour ajouter la classe de corps, puis recherchez l'élément via la classe de corps IE7, puis le nom de l'élément, puis ajoutez dans le style nième enfant.

Vous pouvez changer votre code en quelque chose comme ça pour le faire fonctionner

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

Cela fait le travail pour vous

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

Voici une référence CSS de SnoopCode à ce sujet.

J'utilise ci-dessous CSS pour avoir une image de fond pour la liste 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>

Essaye ça :

    .class_name > *:first-child {
        border: 1px solid red;
    }

Pour une raison quelconque, aucune des réponses ci-dessus ne semble aborder le cas du véritable premier et seul premier enfant du parent.

#element_id > .class_name:first-child

Toutes les réponses ci-dessus échoueront si vous souhaitez appliquer le style uniquement à l'enfant de première classe dans ce code.

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

Essayez ceci simple et efficace

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

Je crois que l'utilisation du sélecteur relatif + pour sélectionner les éléments placés immédiatement après fonctionne le mieux ici (comme peu l'ont suggéré auparavant).

Il est également possible pour ce cas d'utiliser ce sélecteur

.home p:first-of-type

mais ce n'est pas le sélecteur d'élément.

Ici, vous avez une belle liste de sélecteurs CSS: https://kolosek.com/css-selectors/

Essayez cette solution:

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

Lien CodePen