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
150
151
|
---
title: Seletores CSS
slug: Web/CSS/CSS_Selectors
tags:
- CSS
- Referência(2)
- Seletores
- Seletores CSS
translation_of: Web/CSS/CSS_Selectors
original_slug: Web/CSS/Seletores_CSS
---
<div>{{CSSRef}}</div>
<p>Os Seletores definem quais elementos um conjunto de regras CSS se aplica.</p>
<h2 id="Seletores_Básicos">Seletores Básicos</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Type_selectors">Seletor por tag</a></dt>
<dd>Este seletor básico escolhe todos os elementos que correspondem ao nome fornecido.<br>
<strong>Sintaxe:</strong> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>nome-da-tag</em></span></font><br>
<strong>Exemplo:</strong> <code>input</code> corresponderá a qualquer elemento {{HTMLElement('input')}}.</dd>
<dt><a href="/en-US/docs/Web/CSS/Class_selectors">Seletor por classe</a></dt>
<dd>Este seletor básico escolhe elementos baseados no valor de seu atributo <code>classe</code>.<strong> Sintaxe:</strong> <code>.<em>nome-da-classe</em></code><br>
<strong>Examplo:</strong> <code>.index</code> irá corresponder a qualquer elemento que tenha o índice de classe (provavelmente definido por um atributo class="index", ou similar).</dd>
<dt><a href="/en-US/docs/Web/CSS/ID_selectors">Seletor por ID</a></dt>
<dd>Este seletor básico escolhe nós baseados no valor do atributo <code>id</code>. Deve existir apenas um elemento com o mesmo ID no mesmo documento.<br>
<strong>Sintaxe:</strong> <code>#<em>nome-do-id</em></code><br>
<strong>Exemplo:</strong> <code>#toc</code> irá corresponder ao elemento que possuir o id=toc (definido por um atributo id="toc", ou similar).</dd>
<dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Seletores universais</a></dt>
<dd>Este seletor básico irá escolher todos os nós. Ele também existe em um namespace único e em uma variante de todo o namespace também.<br>
<strong>Sintaxe:</strong> <code>* ns|* *|*</code><br>
<strong>Exemplo:</strong> <code>*</code> irá corresponder a todos os elementos do documento.</dd>
<dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Seletores por atributo</a></dt>
<dd>Este seletor básico ira escolher nós baseados no valor de um de seus atributos, ou até mesmo pelo próprio atributo.<br>
<strong>Sintaxe:</strong> <code>[atrib] [atrib=valor] [atrib~=valor] [atrib|=valor] [atrib^=valor] [atrib$=valor] [atrib*=valor]</code><br>
<strong>Exemplo:</strong> <code>[autoplay]</code> irá corresponder a todos os elementos que possuirem o atributo <code>autoplay</code> (para qualquer valor).</dd>
</dl>
<h2 id="Combinadores">Combinadores</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Seletores de irmãos adjacentes</a></dt>
<dd>O combinador <code>+</code> seleciona os nós que seguem imediatamente o elemento especificado anteriormente.<br>
<strong>Sintaxe:</strong> <code><var>A</var> + <var>B</var></code><br>
<strong>Exemplo:</strong> <code>ul + li</code> irá corresponder a qualquer elemento {{HTMLElement('li')}} que segue imediatamente após um elemento {{HTMLElement('ul')}}.</dd>
<dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Seletores gerais de irmãos</a></dt>
<dd>O combinador <code>~</code> seleciona os nós que seguem (não necessariamente imediatamente) o elemento especificado anteriormente, se ambos os elementos compartilham o mesmo pai.<br>
<strong>Sintaxe:</strong> <code><var>A</var> ~ <var>B</var></code><br>
<strong>Exemplo:</strong> <code>p ~ span</code> irá corresponder a todo elemento {{HTMLElement('span')}} que seguir um elemento {{HTMLElement('p')}} dentro de um mesmo elemento pai.</dd>
<dt><a href="/en-US/docs/Web/CSS/Child_selectors">Seletor de filhos</a></dt>
<dd>O combinador <code>></code> selecina nós que são filhos diretos do elemento especificado anteriormente.<br>
<strong>Sintaxe:</strong> <code><var>A</var> > <var>B</var></code><br>
<strong>Exemplo:</strong> <code>ul > li</code> irá corresponder a todo elemento {{HTMLElement('li')}} que estiver diretamente dentro de um elemento {{HTMLElement('ul')}} especificado.</dd>
<dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Seletor de descendentes</a></dt>
<dd>O combinador <code> </code> seleciona os nós que são filhos do elemento especificado anteriormente (não é necessário que seja um filho direto).<br>
<strong>Sintaxe:</strong> <code>A B</code><br>
<strong>Exemplo:</strong> <code>div span</code> irá corresponder a todo e qualquer elemento {{HTMLElement('span')}} que estiver dentro do elemento {{HTMLElement('div')}}.</dd>
</dl>
<h2 id="Pseudo-classes">Pseudo-classes</h2>
<p><a href="/pt-BR/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> permitem selecionar elementos baseados em informações que não estão contidas na árvore de documentos como um estado ou que é particularmente complexa de extrair. Por exemplo, eles correspondem se um link foi visitado anteriormente ou não.</p>
<h2 id="Pseudo-elementos">Pseudo-elementos</h2>
<p><a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">Pseudo-elementos</a> são asbtrações da árvore que representam entidades além do que o HTML faz. Por exemplo, o HTML não tem um elemento que descreva a primeira letra ou linha de um parágrafo, ou o marcador de uma lista. Os pseudo-elementos representam essas entidades e permitem que as regras CSS sejam associadas a elas. Desta forma, essas entidades podem ser denominadas independentemente.</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')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'selector.html')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('CSS1')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</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>1</td>
<td>{{CompatGeckoDesktop("1")}}</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>1.5</td>
<td>{{CompatGeckoMobile("1.9.2")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
|
