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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: ':lang'
slug: 'Web/CSS/:lang'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Web
translation_of: 'Web/CSS/:lang'
---
<div>{{CSSRef}}</div>
<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:lang()</code></strong> coincideix amb elements basats en l'idioma en què estan definits.</p>
<pre class="brush: css no-line-numbers">/* Selecciona qualsevol <p> en Anglès (en) */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
}</pre>
<div class="note">
<p><strong>Nota:</strong> En HTML, el llenguatge està determinat per una combinació de l'atribut {{htmlattrxref ("lang")}}, l'element {{HTMLElement ("meta")}}, i possiblement per informació del protocol (com ara encapçalaments HTTP. Per a altres tipus de documents, hi pot haver altres mètodes de document per determinar el llenguatge</p>
</div>
<h2 id="Sintaxi">Sintaxi</h2>
<h3 id="Sintaxi_formal">Sintaxi formal</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h3 id="Paràmetre">Paràmetre</h3>
<dl>
<dt><code><language-code></code></dt>
<dd>Un {{cssxref("<string>")}} representant l'idioma en el qual us voleu dirigir. Els valors acceptables s'especifiquen en l'especificació <a href="/en-US/docs/Web/HTML">HTML</a>.</dd>
</dl>
<h2 id="Exemple">Exemple</h2>
<p>En aquest exemple, la pseudo-classe <code>:lang()</code> s'utilitza per a que coincideixi amb els pares dels elements de la cita ({{htmlElement("q")}}) usant <a href="/en-US/docs/Web/CSS/Child_selectors">combinadors fills</a>. Tingueu en compte que això no il·lustra l'única manera de fer-ho, i que el millor mètode a utilitzar depèn del tipus de document. També tingueu en compte que els valors {{glossary("Unicode")}} s'utilitzen per especificar alguns dels caràcters especials de la cita.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: css">:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: html"><div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
</pre>
<h3 id="Resultat">Resultat</h3>
<p>{{EmbedLiveSample('Example', 350)}}</p>
<h2 id="Especificacions">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Cap canvi.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Cap canvi significatiu.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Definició inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1")}}</td>
<td>8.0</td>
<td>8.0</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Descripció</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1")}}</td>
<td>8.0</td>
<td>8.0</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Vegeu_també">Vegeu també</h2>
<ul>
<li><span class="short_text" id="result_box" lang="ca"><span>Pseudo-classes relacionades amb el llenguatge</span></span>: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
<li>Atribut HTML {{htmlattrxref("lang")}}</li>
<li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Etiquetes per identificar idiomes</a></li>
</ul>
|
