From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/_colon_lang/index.html | 133 ++++++++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 files/fr/web/css/_colon_lang/index.html (limited to 'files/fr/web/css/_colon_lang/index.html') diff --git a/files/fr/web/css/_colon_lang/index.html b/files/fr/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..0d4b2d406a --- /dev/null +++ b/files/fr/web/css/_colon_lang/index.html @@ -0,0 +1,133 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

La pseudo-classe :lang permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.

+ +
/* Correspond aux paragraphes, uniquement si ceux-ci */
+/* sont indiqués comme étant en anglais (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Note : En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.

+ +

Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.

+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Paramètre

+ +
+
language-code
+
La chaîne de caractères ({{cssxref("<string>")}}) qui définit la langue des éléments qu'on veut sélectionner.
+
+ +

Exemples

+ +

Dans cet exemple, la pseudo-classe :lang est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":first-child")}}. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.

+ +

CSS

+ +
:lang(fr) > Q {
+  quotes: '« ' ' »';
+}
+
+:lang(de) > Q {
+  quotes: '»' '«' '\2039' '\203A';
+}
+
+:lang(en) > Q {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+
+ +

HTML

+ +
<div lang="fr">
+  <q>
+    Cette citation française a
+      <q>une citation</q>
+    imbriquée.
+  </q>
+</div>
+
+<div lang="de">
+  <q>
+    Cette citation allemande a
+      <q>une citation</q>
+    imbriquée.
+  </q>
+</div>
+
+<div lang="en">
+  <q>
+    Cette citation anglaise a
+      <q>une citation</q>
+    imbriquée.
+  </q>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple', '350')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Ajout du joker pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Aucune modification significative.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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