blob: 4301b602dcaa0f49fcb5fa655f529facfda93b6b (
plain)
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
|
---
title: ':first-child'
slug: 'Web/CSS/:first-child'
tags:
- Referencia
translation_of: 'Web/CSS/:first-child'
---
<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Sumário</h2>
<p>A <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> de <a href="/en/CSS" title="CSS">CSS</a> <strong><code>:first-child</code></strong> representa qualquer elemento que seja o primeiro filho de seus pais.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="eval">elemento:first-child { estilos }
</pre>
<h2 id="Examples" name="Examples">Exemplos</h2>
<h3 id="Exemplo_1">Exemplo 1</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<span>Este span é verde limão!</span>
<span>Este span não é verde limão. :(</span>
</div>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">span:first-child {
background-color: lime;
}
</pre>
<p>... resultado ...</p>
<p><span>{{EmbedLiveSample('Exemplo_1',300,50)}}</span></p>
<h3 id="Example_2_-_Using_UL" name="Example_2_-_Using_UL">Exemplo 2 - Usando UL</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><ul>
<li>Elemento de Lista 1</li>
<li>Elemento de Lista 2</li>
<li>Elemento de Lista 3</li>
</ul></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">li{
color:red;
}
li:first-child{
color:green;
}</pre>
<p>... resultado ...</p>
<p>{{EmbedLiveSample('Example_2_-_Using_UL',300,150)}}</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Sem mudança.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browsers_compatíveis">Browsers compatíveis</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>4.0</td>
<td>{{ CompatGeckoDesktop("1.9") }}</td>
<td>7<sup><a href="#compat_hint1">[1]</a></sup></td>
<td>9.5</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td><span style="font-size: 12px; line-height: 18px;">Suporte básico</span></td>
<td>1.0</td>
<td>{{ CompatGeckoMobile("1.9.1") }}</td>
<td>7<sup><a href="#compat_hint1">[1]</a></sup></td>
<td>10.0</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<p><a id="compat_hint1" name="compat_hint1">[1]</a> Internet Explorer 7 não atualiza os estilo dos elementos quando estes são adicionados dinamicamente. No Internet Explorer 8, se um elemento é inserido dinamicamente por um evento de clique, o estilo first-child não é aplicado até que este perca o foco.</p>
|
