From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../web/css/general_sibling_combinator/index.html | 81 ++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 files/fr/web/css/general_sibling_combinator/index.html (limited to 'files/fr/web/css/general_sibling_combinator/index.html') diff --git a/files/fr/web/css/general_sibling_combinator/index.html b/files/fr/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..ea97bdbf67 --- /dev/null +++ b/files/fr/web/css/general_sibling_combinator/index.html @@ -0,0 +1,81 @@ +--- +title: Sélecteurs de voisins généraux +slug: Web/CSS/Sélecteurs_de_voisins_généraux +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.

+ +
/* Parmi tous les éléments <img>, cibler tous
+   éléments <p> qui les suivent. */
+img ~ p {
+  color: red;
+}
+ +

Syntaxe

+ +
premier_element ~ second_element { propriétés de style }
+
+ +

Exemples

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>Ici, ce n'est pas rouge.</span>
+<p>Voici un paragraphe.</p>
+<code>Un peu de code.</code>
+<span>Et un autre span.</span>
+<code>Encore du code</code>
+<span>Ici aussi, c'est rouge</span>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 280, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Ce combinateur est renommé en « subsequent-sibling combinator ».
{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.general_sibling")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf