Comment sélectionner le premier élément avec une classe spécifique dans une structure HTML complexe ?

Comment sélectionner le premier élément d'une classe donnée

Lorsque vous travaillez avec des éléments HTML, la sélection d'éléments spécifiques à des fins de style ou de manipulation est cruciale. Un scénario consiste à cibler la première occurrence d'une classe au sein d'un autre élément, présentant un défi lorsque la position de la classe souhaitée varie au sein de différents éléments.

Dans ce contexte, nous visons à sélectionner le premier élément avec la classe ' A' dans un élément identifié par l'identifiant ou la classe 'B'. Le problème se pose lorsque « B » peut différer à la fois par son nom et sa structure, et que l'élément « A » est incohérent dans sa position dans « B ». Cependant, un facteur cohérent demeure : la présence d'un élément externe 'C'.

Solution : Utiliser des sélecteurs frères et sœurs

CSS3 introduit la pseudo-classe :first-of-type, qui sélectionne le premier élément de ce type parmi les frères et sœurs. Malheureusement, CSS n'a pas de pseudo-classe :first-of-class. Par conséquent, nous avons besoin d'une solution de contournement alternative.

Une approche consiste à utiliser le combinateur général de frères et sœurs (~) ainsi que des styles de substitution pour atteindre notre objectif. Cette technique exploite le fait que CSS applique les styles de manière descendante. En définissant deux règles, nous pouvons remplacer le style par défaut des éléments '.A' qui ne correspondent pas à nos critères souhaités :

.C > * > .A {
  /* Styles for all '.A' elements that are grandchildren of '.C' */
}

.C > * > .A ~ .A {
  /* Styles for '.A' elements that follow the first '.A' child of any element that is a child of '.C' */
}

Dans ces règles, la première cible tous les petits-enfants '.A' de '. C'. Puisque cela inclut la première occurrence souhaitée, nous devons "annuler" ce style pour les éléments '.A' suivants en utilisant la deuxième règle. Ceci est accompli en utilisant le combinateur ~ pour sélectionner uniquement les éléments '.A' qui suivent un autre élément '.A' sous le même parent.

Comment les styles sont appliqués

Pour illustrer comment cela technique fonctionne, considérez la structure HTML suivante :

<div class="C">
  <div class="B">
    <div class="E">Content <!-- [1] --></div>
    <div class="F">Content <!-- [1] --></div>
    <div class="A">Content <!-- [2] --></div>
    <div class="A">Content <!-- [3] --></div>
  </div>
  <!-- ... other elements ... -->
</div>

Ici, '[1]' représente les éléments qui ne répondent pas à nos critères, tandis que '[2]' et '[3]' représentent le premier élément '.A' et tous les éléments '.A' suivants que nous voulons styliser différemment.

1. La première règle stylise tous les éléments '.A' qui sont des petits-enfants de '.C' . Cela inclut les éléments '[2]' et '[3]'.
2. La deuxième règle cible tout élément '.A' qui suit un autre élément '.A' sous le même parent. Cela inclut l'élément '[3]' mais pas '[2]' car il n'a pas de frère précédent avec la classe '.A'.

En conséquence, l'élément '[2]' (le premier '.A') conserve le style par défaut, tandis que le style de l'élément '[3]' est remplacé par la deuxième règle. Ainsi, nous avons réussi à cibler et styliser la première occurrence de la classe '.A' dans le contexte de l'élément '.C'.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!