files/de/web/css/_colon_lang/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

---
title: ':lang'
slug: 'Web/CSS/:lang'
tags:
  - CSS
  - CSS Pseudoklasse
  - Layout
  - Referenz
  - Web
translation_of: 'Web/CSS/:lang'
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>:lang</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> matcht Elemente anhand der Sprache, in der das Element ist. In HTML wird die Sprache durch eine Kombination aus <code>lang</code> Attribut, dem {{HTMLElement("meta")}} Element und möglicherweise durch Informationen durch das Protokoll (wie z. B. HTTP Header). Für andere Dokumenttypen können andere Dokumentmethoden zur Bestimmung der Sprache existieren.</p>

<p>Akzeptierte <code>language-code</code> Strings werden in der <a href="/de/docs/Web/HTML">HTML</a> 4.0 Specification definiert.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox"><var>element</var>:lang(language-code) { <em>Stileigenschaften</em> }
</pre>

<h2 id="Beispiel">Beispiel</h2>

<p>In diesem Beispiel wird der <code>lang</code> Selektor dazu verwendet, um mit Hilfe von <a href="/de/docs/Web/CSS/Kindselektoren">Kindselektoren</a> das Elternelement eines {{HTMLElement("q")}} Elements zu matchen. Es ist nicht dazu gedacht, den einzigen oder sogar den korrekten (was vom Dokumenttyp abhängt) Weg aufzuzeigen, um dies umzusetzen. Beachte, Unicodewerte werden verwendet, um spezielle Anführungszeichen anzugeben.</p>

<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) &gt; q { quotes: '« ' ' »'; }
:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
</pre>

<p>... wo ...</p>

<pre class="brush: html">  &lt;div lang="fr"&gt;&lt;q&gt;Dieses französische Anführungszeichen hat ein &lt;q&gt;verschachteltes&lt;/q&gt; Zitat.&lt;/q&gt;&lt;/div&gt;
  &lt;div lang="de"&gt;&lt;q&gt;Dieses deutsche Anführungszeichen hat ein &lt;q&gt;verschachteltes&lt;/q&gt; Zitat.&lt;/q&gt;&lt;/div&gt;
  &lt;div lang="en"&gt;&lt;q&gt;Dieses englische Anführungszeichen hat ein &lt;q&gt;verschachteltes&lt;/q&gt; Zitat.&lt;/q&gt;&lt;/div&gt;
</pre>

<p>... wird dargestellt als ...</p>

<p>{{EmbedLiveSample('Beispiel', '100%', 100)}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Keine wesentliche Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

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

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Sprachbezogene Pseudoklassen: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
 <li><a href="/de/docs/Web/API/HTMLElement/lang">Spracheigenschaft</a></li>
 <li><a class="external" href="http://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1">W3C HTML 4: Sprachcodes</a></li>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">W3C DOM Level 2 HTML: lang</a></li>
</ul>