diff options
Diffstat (limited to 'files/pt-pt/web/css/pseudo-elements/index.html')
-rw-r--r-- | files/pt-pt/web/css/pseudo-elements/index.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/pseudo-elements/index.html b/files/pt-pt/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..780d17c378 --- /dev/null +++ b/files/pt-pt/web/css/pseudo-elements/index.html @@ -0,0 +1,104 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudoelemento + - Referencia + - Resumo + - Seletores + - Sinopse +translation_of: Web/CSS/Pseudo-elements +--- +<div>{{CSSRef}}</div> + +<p>Um <strong>pseudoelemento</strong> de CSS é uma palavra-chave adicionada ao seletor que lhe permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Por exemplo, {{CSSxRef("::first-line")}} pode ser utilizado para alterar o tipo de letra da primeira linha de um parágrafo.</p> + +<pre class="brush: css no-line-numbers">/* The first line of every <p> element. */ +p::first-line { + color: blue; + text-transform: uppercase; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> In contrast to pseudo-elements, {{CSSxRef("pseudo-classes")}} can be used to style an element based on its <em>state</em>.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">selector::pseudo-element { + property: value; +}</pre> + +<p>You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.</p> + +<div class="note"> +<p><strong>Note:</strong> As a rule, double colons (<code>::</code>) should be used instead of a single colon (<code>:</code>). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.</p> +</div> + +<h2 id="Índice_de_pseudoelementos_padrões">Índice de pseudoelementos padrões</h2> + +<div class="index" id="index"> +<ul> + <li>{{CSSxRef("::after", "::after (:after)")}}</li> + <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::before", "::before (:before)")}}</li> + <li>{{CSSxRef("::cue", "::cue (:cue)")}}</li> + <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li> + <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li> + <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::selection")}}</li> + <li>{{CSSxRef("::slotted", "::slotted()")}}</li> + <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versão Mais Baixa</th> + <th>Suporta</th> + </tr> + <tr> + <td rowspan="2">Internet Explorer</td> + <td>8.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>9.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>1.0 (1.5)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Opera</td> + <td>4.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>7.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + </tbody> +</table> + +<h2 id="Consultar_também">Consultar também:</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Pseudo-classes" style="white-space: nowrap;">Pseudoclasses</a></li> +</ul> |