CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Attributes

Fonctions CSS Complète des sélecteurs CSS

CSS + Sélecteur d'adjacent sibling

Sélecteur d'adjacent sibling (+) Il est entre deux sélecteurs, lorsque le deuxième élément suit immédiatement le premier élément, et que les deux éléments sont des éléments enfants du même parent, le deuxième élément est sélectionné.

Manuel complet des sélecteurs CSS

Exemple en ligne

Sélectionnez tous les <p> et <span> suivant immédiatement après un <div> :

Exemple

<!DOCTYPE html>
<html>
<title>Réseau de tutoriels de base (oldtoolbag.com)</title>
<head>
<style>
div+p
{
background-color:red;
color:white;
}
div+span　{
　　background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>Bienvenue sur le Réseau de tutoriels de base (fr.oldtoolbag.com)</h1>
<div>
<p>Notre adresse est : fr.oldtoolbag.com.</p>
<p>Le nom de notre site est : Réseau de tutoriels de base.</p>
<span>Démonstration du sélecteur d'adjacent sibling</span>
<span>Démonstration du sélecteur d'adjacent sibling</span>
</div>
<p>Notre site vous offre divers tutoriels de base. Apprenez bien les bases, et vous pourrez aller plus loin !</p>
</body>
</html>

Voyons si ça fonctionne ‹/›

Définition et utilisation

former_element　+　target_element　{　style　properties　}

element+element　 Le sélecteur d'adjacent sibling est utilisé pour sélectionner l'élément suivant immédiatement après le premier élément spécifié (pas un élément interne).

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Tous les navigateurs populaires le supportent element+element sélecteur d'adjacent sibling

Attention : 　element+elementIE8Doit être déclaré s'il est utilisé dans 　<!DOCTYPE>Manuel complet des sélecteurs CSS

Fonctions CSS Complète des sélecteurs CSS