Comprendre les sélecteurs de frères et sœurs CSS : guide du débutant

CSS fournit une large gamme de sélecteurs pour cibler des éléments spécifiques dans un document HTML. Bien que les sélecteurs de classe et d’ID soient couramment utilisés, ils ne peuvent pas toujours cibler des éléments en fonction de leur relation avec d’autres éléments. C'est là que les sélecteurs de frères et sœurs CSS entrent en jeu.

Les sélecteurs frères et sœurs CSS sont cruciaux pour créer des mises en page Web sophistiquées et flexibles, vous permettant de styliser les éléments en fonction de leur position relative par rapport aux autres éléments. Ils sont particulièrement utiles lorsque la conception dépend du placement des éléments et utilise divers combinateurs, tels que Descendant Combinator, Child Combinator, Adjacent Sibling Combinator, etc. Cette approche vous permet d'appliquer des styles à des éléments spécifiques sans ajouter de classes ou d'identifiants supplémentaires, réduisant ainsi l'encombrement du code.

Que sont les sélecteurs de frères et sœurs CSS ?

Les sélecteurs frères et sœurs CSS sont utilisés pour sélectionner des éléments frères et sœurs (partageant le même élément parent), c'est-à-dire qu'ils vous aident à sélectionner des éléments HTML en fonction de leur relation avec d'autres éléments partageant le même parent. Ces combinateurs sont des symboles uniques qui aident les navigateurs à comprendre la relation entre les éléments HTML.

Il existe deux types de sélecteurs de frères et sœurs CSS :

• Sélecteur de frères et sœurs adjacents ( )

• Sélecteur général de frères et sœurs (-)

Voici pourquoi les sélecteurs de frères et sœurs CSS sont cruciaux pour les développeurs Web :

• Spécificité améliorée : Par rapport aux sélecteurs génériques, les sélecteurs frères permettent un style plus précis des éléments. Cela améliore la maintenabilité et l'organisation de votre code CSS.

• Mise en page dynamique : En vous concentrant sur la position des éléments par rapport aux frères et sœurs, vous pouvez développer des mises en page qui s'adaptent à la structure du contenu. Imaginez styliser différemment le premier et le dernier enfant d'un conteneur.

• Relations visuelles : Il vous permet de créer des relations visuelles entre les éléments. Pensez à surligner les légendes suivies des images correspondantes ou à ajouter des bordures entre les sections adjacentes.

• Répétition réduite du code : lorsque vous devez styliser des éléments en fonction de leur position dans un certain conteneur, les sélecteurs frères peuvent éliminer le besoin d'affectations de classe répétitives, ce qui permet d'obtenir un code plus propre.

• Efficacité : Cela peut entraîner un CSS plus efficace en minimisant la redondance. Au lieu d'écrire de nombreuses règles pour cibler certains éléments dans différentes conditions, les sélecteurs frères et sœurs vous permettent d'écrire des règles CSS simples et réutilisables qui s'adaptent à la structure du document.

• Responsive Design : Cela peut être extrêmement pratique dans la conception de sites Web réactifs. Ils vous permettent d'ajuster la disposition ou l'apparence des éléments en fonction de leur relation avec les autres, ce qui est essentiel pour offrir une expérience utilisateur cohérente sur plusieurs appareils et tailles d'écran.

Les sélecteurs de frères et sœurs CSS vous permettent de progresser au-delà d'une approche du style purement basée sur les éléments. Ils vous permettent d'exploiter la structure hiérarchique du HTML pour produire une expérience utilisateur plus cohérente et visuellement plus agréable.

Types de sélecteurs de frères et sœurs CSS

Il existe deux types de sélecteurs frères et sœurs CSS : les sélecteurs adjacents et généraux. Les deux sont importants pour permettre aux développeurs de cibler des éléments en fonction de leurs relations fraternelles, mais ils fonctionnent différemment.

Le diagramme ci-dessus montre les sélecteurs frères et sœurs en CSS et comment ils ciblent les éléments.

Sélecteur de frères et sœurs adjacents ( )

Le sélecteur frère adjacent, représenté par un symbole plus ( ), permet de cibler un élément immédiatement après un autre élément ayant le même élément parent. Cela signifie qu'il ciblera uniquement le premier élément frère qui apparaît directement après l'élément spécifié, permettant un style précis et contextuel sans classes ni identifiants supplémentaires.

Ce sélecteur offre un haut niveau de précision, vous permettant de styliser les éléments en fonction de leur position exacte dans la structure HTML.

Syntaxe :

    element1 + element2 {
      /* CSS styles */
    }

Dans cette syntaxe :

• element1 : Représente l'élément qui précède l'élément cible.

• element2 : Représente l'élément que vous souhaitez styliser, qui doit suivre directement l'élément1.

• Signe plus ( ): Agit comme un combinateur, signifiant la relation spécifique entre les éléments.

Utilisations :

Comme mentionné précédemment, ce sélecteur cible un élément qui suit immédiatement un autre élément spécifié. Ceci est utile lorsque vous stylisez un élément en fonction de son frère direct.

• Style des éléments de formulaire : Lorsqu'un utilisateur se concentre sur un champ de saisie, vous souhaiterez peut-être mettre en surbrillance l'étiquette qui le suit immédiatement.

    input:focus + label {
      color: blue;
    }

• Formatage du contenu : vous pouvez appliquer une mise en forme spéciale à un paragraphe qui suit un titre.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Exemple : page du blog LambdaTest

Prenons un exemple de la page du blog LambdaTest pour montrer l'utilisation du sélecteur de frères et sœurs adjacents.

Décomposons les différentes instances où le sélecteur de frère adjacent a été utilisé :

    element1 + element2 {
      /* CSS styles */
    }

Cela cible l'élément de liste (

) positionné immédiatement après l'élément de classe .platform. Dans le menu de navigation, cette règle positionne l'élément avec la classe .enterprise (qui vient juste après .platform) pour être stylisé avec position : relative. Cela permet au menu déroulant dans l'élément .enterprise d'être positionné en utilisant le positionnement absolu.

    input:focus + label {
      color: blue;
    }

Cela cible l'élément bouton qui est positionné immédiatement après le bouton avec la classe .login. Il définit les styles (remplissage, bordure, etc.) spécifiquement pour le deuxième bouton, créant une distinction visuelle différente entre la connexion et le bouton suivant.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Cela cible l'élément du conteneur d'entrée de recherche positionné immédiatement après l'élément avec la classe .button-container. Il définit les styles du conteneur d'entrée de recherche (largeur, positionnement, etc.).

    .platform + li {
        position: relative;
    }

Il s'agit d'un cas d'utilisation légèrement différent. Ici, le sélecteur frère adjacent cible l'élément .search-icon *, mais uniquement lorsque l'élément *.search-input a le focus (lorsque l'utilisateur clique dans la barre de recherche). De cette façon, vous pouvez modifier la couleur et la taille de l'icône pour fournir un retour visuel à l'utilisateur lorsqu'il interagit avec la saisie de recherche.

Sélecteur général de frères et sœurs (~)

Le sélecteur général de frères et sœurs, représenté par le symbole tilde (~), vous permet de cibler et de styliser les éléments qui partagent le même parent et suivent un élément spécifié. Contrairement au sélecteur de frères et sœurs adjacents, qui cible uniquement le frère ou la sœur immédiat, le sélecteur de frères et sœurs général affecte tous les frères et sœurs suivants.

Syntaxe :

La syntaxe du sélecteur général de frères et sœurs est :

    .login + button {
        padding: 12px 15px;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #eee;
    }

Dans cette syntaxe :

• **element1 : **Représente l'élément de référence.

• element2 : représente l'élément cible, qui suit element1 et partage le même parent.

Le sélecteur général de frères et sœurs est pratique lorsque vous stylisez des composants liés à la structure HTML mais pas nécessairement adjacents les uns aux autres. Par exemple, vous pouvez l'utiliser pour styliser tous les paragraphes qui suivent un élément de balise HTML

, même s'il y a d'autres éléments entre eux.

Utilisations :

Le sélecteur général de frères et sœurs cible tous les frères et sœurs d'un élément spécifié qui partagent le même parent, quelle que soit leur position.

• Liens de navigation : utilisez le sélecteur général de frères et sœurs pour styliser tous les liens de navigation qui suivent un lien en surbrillance.

    element1 + element2 {
      /* CSS styles */
    }

• Style des listes : Si vous souhaitez styliser tous les éléments de la liste après un élément spécifique, utilisez le sélecteur général de frères et sœurs.

    input:focus + label {
      color: blue;
    }

• Thème des sections : Appliquez un style différent à toutes les sections qui suivent une section spécifique au sein du même parent dans un document.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Exemple : page de documentation LambdaTest

Dans l'exemple de la page LambdaTest Docs, le sélecteur général de frères et sœurs stylise tous les éléments qui suivent un div .docs-title dans la section .docs-category . Cette approche permet de différencier les liens des autres contenus et de créer une mise en page structurée. Il garantit que tous les liens associés sont visuellement regroupés et stylisés de manière cohérente, en conservant une conception propre et organisée.

Dans l'exemple ci-dessus, la règle CSS, .docs-title ~ a *cible tous les *anchor () éléments qui viennent après un .docs-title div. Les styles utilisés incluent un affichage de bloc, une marge d'espacement et une couleur, une taille et un poids de texte spécifiques.

Comprendre ces deux sélecteurs frères permet un style plus ciblé et dynamique sur vos pages Web. Cependant, les sélecteurs frères et sœurs CSS sont-ils compatibles avec tous les navigateurs ?

Compatibilité du navigateur

Les sélecteurs frères et sœurs CSS avec combinateurs sont largement pris en charge dans les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, il est toujours recommandé de vérifier la compatibilité avec les anciennes versions de navigateur et de tester votre site Web sur différents navigateurs pour garantir un comportement cohérent.

Pour tester les styles de votre site Web sur différents navigateurs et vous assurer que tout fonctionne comme prévu, envisagez d'utiliser une plate-forme basée sur le cloud comme LambdaTest. Il s'agit d'une plate-forme d'exécution de tests basée sur l'IA qui vous permet d'exécuter des tests de compatibilité de navigateur manuels et automatisés à grande échelle sur 3 000 navigateurs et combinaisons de systèmes d'exploitation.

Meilleures pratiques et considérations

L'utilisation de sélecteurs de frères et sœurs CSS peut grandement améliorer la conception de votre site Web. Néanmoins, suivre les meilleures pratiques et être conscient de certaines considérations est important pour garantir que vos feuilles de style CSS restent efficaces et maintenables.

Combiner des sélecteurs pour la spécificité

Les sélecteurs de frères et sœurs CSS offrent une spécificité inférieure à celle des classes et des identifiants. Cela signifie que s’il existe une règle de style conflictuelle avec une spécificité plus élevée, la règle la plus spécifique a préséance. Soyez conscient des conflits et assurez-vous que les styles de sélecteur de vos frères et sœurs ciblent les bons composants.

Les sélections frères et sœurs peuvent être combinées avec d'autres sélecteurs CSS pour améliorer la spécificité et éviter les conflits. Cela peut empêcher l'application de styles dans des cas indésirables.

    element1 + element2 {
      /* CSS styles */
    }

Évitez la surutilisation des sélecteurs de frères et sœurs

Une utilisation excessive des sélecteurs frères et sœurs peut rendre le CSS plus difficile à lire et à gérer. Essayez de simplifier et de clarifier vos feuilles de style pour les rendre plus faciles à comprendre. Pensez à utiliser des classes ou des éléments imbriqués pour des scénarios de ciblage plus sophistiqués.

    input:focus + label {
      color: blue;
    }

Limiter la portée des sélecteurs

Évitez d'utiliser des sélecteurs trop larges qui pourraient involontairement styliser plus d'éléments que prévu. Par exemple, utilisez .nav-item ~ .nav-item au lieu de div ~ div pour vous assurer de cibler uniquement les éléments pertinents.

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Assurer la réactivité et la compatibilité

Il est essentiel de s'assurer que votre site Web soit attrayant et fonctionne correctement sur tous les appareils et navigateurs. Lors de l'utilisation de sélecteurs frères et sœurs CSS dans des contextes spécifiques, il est essentiel de donner la priorité à la réactivité et à une large compatibilité.

Voici quelques considérations importantes :

• **Requête multimédia : **Utilisez des requêtes multimédias pour personnaliser vos styles en fonction de la taille de l'écran et de l'orientation de l'appareil. Cela garantit que la mise en page de votre site Web s’adapte pour un affichage optimal sur les ordinateurs de bureau, les ordinateurs portables, les tablettes et les smartphones. Pour valider la conception réactive sur différents appareils et navigateurs, utilisez le navigateur LT proposé par LambdaTest. Cet outil de test de sites Web mobiles vous permet de tester votre site sur 53 fenêtres d'affichage d'appareils, garantissant ainsi une expérience utilisateur cohérente et positive sur différents appareils.

La requête multimédia CSS ci-dessous cible les styles pour les écrans de 992 pixels de large ou moins, incluant généralement les tablettes et les smartphones en mode portrait. Dans cette requête multimédia, vous pouvez ajuster la hauteur du corps sur automatique et définir la hauteur de .logo-container img sur 40px, entre autres changements.

L'extrait de code ci-dessous est un exemple de requête multimédia qui ajuste la disposition de la section des articles de blog pour les écrans de 992 pixels de large ou moins. Il définit .blog-image-text-container * pour qu'il s'affiche comme un conteneur flexible avec une direction de colonne et ajuste sa largeur à 100 %. Les images à l'intérieur de *.blog-image-container *sont stylisées avec une largeur de 100 % et une hauteur automatique. De plus, *.table-of-content *est masqué à l'aide de *display : none.

Résultat :

Le résultat ci-dessus est affiché sur le navigateur LT pour valider la réactivité de vos sites Web sur les appareils de bureau, mobiles et tablettes.

Pour commencer à utiliser LT Browser et tester la réactivité de votre application, cliquez simplement sur le bouton de téléchargement ci-dessous.

Regardez la vidéo ci-dessous pour en savoir plus sur les navigateurs LT et comment démarrer.

• Compatibilité des navigateurs : testez les fonctionnalités et l'apparence de votre site Web sur plusieurs navigateurs pour vous assurer que vos styles et mises en page s'affichent de manière cohérente. Les navigateurs peuvent interpréter le code CSS légèrement différemment, les tests permettent donc d'identifier et de résoudre les incohérences. Comme indiqué ci-dessus, vous pouvez utiliser LambdaTest pour effectuer des tests multi-navigateurs afin de valider si vos sites Web sont pris en charge sur différents navigateurs et fonctionnent comme prévu.

En donnant la priorité à la réactivité et à la compatibilité, vous pouvez créer un site Web qui offre une expérience utilisateur transparente à tous les utilisateurs, quel que soit leur appareil ou leur navigateur.

Utiliser des classes pour plus de clarté

Les sélecteurs frères et sœurs CSS sont utiles pour cibler des éléments en fonction de leur position dans la structure HTML ; cependant, leur utilisation excessive peut entraîner un code moins maintenable. L'utilisation de classes peut contribuer à la lisibilité du code et à la maintenabilité à long terme.

Imaginez un scénario dans lequel vous utilisez un sélecteur de frères et sœurs comme :

    element1 + element2 {
      /* CSS styles */
    }

Ce code cible immédiatement tous les éléments suivant un élément

. Considérons une page avec de nombreuses sections contenant un

et un pour un résumé.

L'utilisation du sélecteur de frères et sœurs CSS devient ici moins claire. Que se passe-t-il si vous ajoutez un autre élément entre

et

*dans des sections spécifiques ? Le sélecteur de frères et sœurs CSS peut ne plus cibler le *

prévu pour ces sections.

À l'aide de classes, vous pouvez spécifier la relation entre les éléments, rendant ainsi votre code CSS lisible et maintenable. Voici comment procéder :

HTML :

    input:focus + label {
      color: blue;
    }

CSS :

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

Dans cet exemple, vous pouvez inclure des classes comme .article-section, .article-title, .article-summary, etc. Styles CSS maintenant cibler ces classes spécifiques, rendant le code plus clair et plus compréhensible. L'utilisation de classes améliore la lisibilité, la maintenabilité et la réutilisation du code.

L'adoption de cette méthode garantit que votre code CSS est maintenable à mesure que votre site Web se développe. N'oubliez pas qu'un code clair et bien organisé fait gagner du temps à long terme et facilite la collaboration avec d'autres développeurs.

Conclusion

En conclusion, les sélecteurs frères et sœurs sont des fonctionnalités CSS efficaces qui permettent aux développeurs de développer des styles sophistiqués et dynamiques basés sur les relations entre les éléments. Ce blog se concentre sur deux types de sélecteurs frères et sœurs : adjacents ( ) et généraux (~).

Pour démontrer l'utilité des sélecteurs de frères et sœurs, nous avons examiné les principes fondamentaux, inclus des exemples pratiques et examiné des applications concrètes. De plus, nous avons mis l’accent sur les meilleures pratiques et considérations pour que votre CSS reste efficace et gérable.

Comprendre et utiliser correctement les sélecteurs de frères et sœurs adjacents et généraux vous permet d'améliorer vos conceptions Web et de développer des mises en page plus sophistiquées et visuellement attrayantes. Pour obtenir les meilleurs résultats, testez correctement vos styles et gardez votre code propre et bien organisé.

Bon codage !

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!