Seletor de atributos - CSS

Seletor de atributos
====================

O **seletor de atributos** combina elementos baseado no valor de um atributo dado.

```css
/\* <a> elementos com um atributo de título \*/
a[title] {
  color: purple;
}

/\* <a> elementos combinando com um href "https://example.org" \*/
a[href="https://example.org"]
{
  color: green;
}

/\* <a> elementos com um href contendo "example" \*/
a[href\*="example"] {
  font-size: 2em;
}

/\* <a> elementos com href terminando em ".org" \*/
a[href$=".org"] {
  font-style: italic;
}
```

`[attr]`

Representa um elemento com atributo de nome *attr*.

`[attr=value]`

Representa um elemento com um atributo de nome *attr*, o qual o valor é exatamente *value.*

`[attr~=value]`

Representa um elemento com um atributo de nome *attr,* o qual *value* é uma lista de palavras separadas por espaços, e uma dessas é exatamente *value.*

`[attr|=value]`

Representa um elemento com um atributo de nome *attr* o qual o valor pode ser exatamente *value* ou pode começar com *value* imediatamente seguido por hífen `-` (U+002D). Isso somente é usado para linguagens que combinam sub-códigos.

`[attr^=value]`

Representa um elemento com um atributo com nome *attr* que tem um valor prefixado (precedido) por *value.*

`[attr$=value]`

Representa um elemento com um atributo de nome *attr* que tem como sufixo (seguido) por *value.*

`[attr*=value]`

Representa um elemento com um atributo de nome *attr* o qual valor contém ao menos uma ocorrência de *value* contido na string.

`[attr operator value i]`

Adiciona um `i` (ou `I`) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).

Exemplos
--------

### Links

#### CSS

```css
a {
  color: blue;
}

/\* Links internos, começando com "#" \*/
a[href^="#"] {
  background-color: gold;
}

/\* Links com "example" em qualquer lugar da URL \*/
a[href\*="example"] {
  background-color: silver;
}

/\* Links com "insensitive" em qualquer lugar da URL,
 independentemente da capitalização \*/
a[href\*="insensitive" i] {
  color: cyan;
}

/\* Links com final ".org" \*/
a[href$=".org"] {
  color: red;
}
```

#### HTML

```html
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>
```

#### Resultado

### Languages

#### CSS

```css
/\* Todas divs com um atributo `lang` em negrito. \*/
div[lang] {
  font-weight: bold;
}
/\* Todas divs com US English em azul (blue). \*/
div[lang~="en-us"] {
  color: blue;
}
/\* Todas divs onde Portuguese esta em verde (green). \*/
div[lang="pt"] {
  color: green;
}
/\* Todas divs onde Chinese esta em vermelho (red), Simplificado para (zh-CN) ou tradicional (zh-TW). \*/
div[lang|="zh"] {
  color: red;
}
/\* Todas divs com Traditional Chinese `data-lang` que é purple. \*/
/\* Nota: Você também poderia usar atributos separados por hífen com aspas duplas \*/
div[data-lang="zh-TW"] {
  color: purple;
}
```

#### HTML

```html
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">?世界您好！</div>
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| Selectors Level 4 # attribute-selectors |

Browser compatibilidade
-----------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


box-sizing - CSS

box-sizing
==========

A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.

Sintaxe
-------
```

Sintaxe formal:
```
box-sizing =
  content-box  | (en-US)
  border-box

```

```
```

box-sizing: content-box
box-sizing: border-box

box-sizing: inherit
```

### Valores

`content-box`

Essa é o estilo padrão, conforme especificado pela norma CSS. As propriedades `width` (largura) e `height` (altura) são medidas incluindo só o conteúdo, mas não o padding, border ou margin. Nota: Padding, border e margin serão fora da box. Exemplo.: Se .box {width: 350px} então se você aplicar uma propriedade {border: 10px solid black;} o resultado renderizado no navegador (browser) será .box {width: 370px;}

`padding-box`
Experimental

As propriedades de largura (`width`) e de altura (`height`) incluem o tamanho padding size, mas não incluem a propriedade border ou margem.

`border-box`

As propriedades de largura (`width`) e de altura (`height`) incluem o tamanho padding size e a propriedade border, mas não incluem a propriedade margin.

Exemplos
--------

```css
/\* funciona em Firefox, WebKit, Opera and IE8+ \*/
/\* exemplo de uso no navegador Firefox \*/

.exemplo {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* CSS box model (en-US) [Eng]


:focus - CSS

:focus
======

Resumo
------

A pseudo-classe `:focus` do CSS é aplicada quando um elemento recebe foco, o que pode ocorrer quando o usuário seleciona o elemento utilizando o teclado ou ativando o mesmo com o mouse (ex: um campo de um formulário).

A pseudo classe é aplicada apenas ao elemento focado, e não aos seus elementos ascendentes, como ocorre com `:checked` e `:enabled` e diferentemente de `:active` ou `:hover`.

Sintaxe
-------
```

elemento:focus { ... }
```

Exemplos
--------

```css
.nome:focus {
  color: red;
}

.sobrenome:focus {
  color: lime;
}
```

```html
<input class="nome" value="Esse elemento ficará vermelho quando focado" />
<input
 class="sobrenome"
 value="Esse elemento ficará verde-limão quando focado" />
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


calc() - CSS

calc()
======

A função **`calc()`** CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como `<length>` (en-US), `<frequency>` (en-US), `<angle>` (en-US), `<time>`, `<percentage>` (en-US), `<number>`, e `<integer>` (en-US) é permitido.

```css
/\* propriedade: calc(expressão) \*/
width: calc(100% - 80px);
```

Syntax
------

A função `calc()` recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão operator precedence rules:

`+`

Adição.

`-`

Subtração.

`*`

Multiplicação. Pelo menos um dos argumentos deve ser um `<number>`.

`/`

Divisão. O operador da direita deve ser um `<number>`.

Os operandos na expressão podem ser qualquer valor de sintaxe `<length>` (en-US). Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.

### Notas

* Divisão por 0 (zero) resulta em um erro gerado pelo HTML parser.
* Os operadores + e - devem estar cercados por **espaço em branco**. Por exemplo, calc (50% -8px) será analisado como uma porcentagem seguida por um comprimento negativo - uma expressão inválida — enquanto calc (50% - 8px) é uma porcentagem seguida por um operador de subtração e um comprimento. Da mesma forma, calc (8px + -50%) é tratado como um comprimento seguido por um operador de adição e uma porcentagem negativa.
* Os operadores `*` e `/` não requerem espaço em branco, mas adicioná-lo para consistência é permitido e recomendado.
* Expressões matemáticas envolvendo porcentagens de larguras e alturas em colunas de tabela, grupos de coluna de tabela, linhas de tabela, grupos de linhas de tabela e células de tabela em tabelas de layout automáticas e fixas podem ser tratadas como se `auto` tivesse sido especificado.
* É permitido aninhar funções `calc ()`, em cujo caso as internas são tratadas como parênteses simples.
### Formal syntax
```

<calc()> =
  calc( <calc-sum> )

<calc-sum> =
  <calc-product> [ (en-US) [ (en-US) '+' | (en-US) '-' ] (en-US) <calc-product> ] (en-US)\* (en-US)

<calc-product> =
  <calc-value> [ (en-US) [ (en-US) '*' | (en-US) '/' ] (en-US) <calc-value> ] (en-US)\* (en-US)

<calc-value> =
  <number>        | (en-US)
  <dimension> (en-US)     | (en-US)
  <percentage> (en-US)    | (en-US)
  <calc-keyword>  | (en-US)
  ( <calc-sum> )

<calc-keyword> =
  e          | (en-US)
  pi         | (en-US)
  infinity   | (en-US)
  -infinity  | (en-US)
  NaN

```

Exemplos
--------

### Posicionando um objeto na tela usando margin

`calc()` torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:

```css
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}
```

```html
<div class="banner">This is a banner!</div>
```

### Dimensionar campos de formulário automaticamente para caber em seu contêiner

Outro caso para `calc()` é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.

Veja-mos no CSS:

```css
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
```

Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos `calc()` novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:

```html
<form>
  <div id="formbox">
    <label>Type something:</label>
    <input type="text" />
  </div>
</form>
```

### calc( ) inserido em variáveis de CSS

Você também pode utilizar `calc()` com variáveis de CSS (en-US). Considere o seguinte código:

```css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

Depois que todas as variáveis forem expandidas, o valor de `widthC` será `calc( calc( 100px / 2) / 2)`, então quando for atribuído à propriedade de largura `.foo`, todos os `calc()` internos (não importa o quão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade `width` será eventualmente `calc( ( 100px / 2) / 2)`, i.e. `25px`. Resumindo: um `calc()` dentro de um `calc()` é idêntico à parênteses.

Questões de acessibilidade
--------------------------

Quando `calc()` é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma unidade de comprimento relativo (en-US), por exemplo:

```css
h1 {
  font-size: calc(1.5rem + 3vw);
}
```

Isso garante que o tamanho do texto será redimensionado se a página for ampliada.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Especificações
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-func |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog


isolation - CSS

isolation
=========

A propriedade CSS **`isolation`** define se o elemento deve criar um novo stacking context.

```css
/\* Keyword values \*/
isolation: auto;
isolation: isolate;

/\* Global values \*/
isolation: inherit;
isolation: initial;
isolation: unset;
```

É especialmente útil em conjunto com `background-blend-mode` que mistura os fundos em um dado stacking context: ela permite isolar grupos de elementos dos seus fundos e misturar as suas cores.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

Uma das palavras-chave listadas abaixo.

### Valores

`auto`

É uma palavra-chave indicando que um novo stacking context deve ser criado somente se uma das propriedades aplicadas ao elemento requererem.

`isolate`

É uma palavra-chave indicando que um novo stacking context deve ser criado.

### Sintaxe formal
```

isolation =
  <isolation-mode>

<isolation-mode> =
  auto     | (en-US)
  isolate

```

Exemplos
--------

```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```

```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

Especificações
--------------

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode`


background-clip - CSS

background-clip
===============

A propriedade CSS **`background-clip`** especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua área de borda, preenchimento ou conteúdo.

Experimente
-----------

Se o elemento não possuir as propriedades `background-image` (en-US) ou `background-color` definidas, esta propriedade só terá um efeito visual quando a borda tiver regiões transparentes ou regiões parcialmente opacas (devido ao `border-style` (en-US) ou `border-image` (en-US)); caso contrário a borda encobrirá a diferença.

|  |  |
| --- | --- |
| Initial value | `border-box` |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Computed value | as specified |
| Animation type | a repeatable list |

Sintaxe
-------

```css
/\* Valores de palavra-chave \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/\* Valores globais \*/
background-clip: inherit;
background-clip: initial;
background-clip: unset;
```

### Valores

`border-box`

O fundo se extende até fora da fronteira da borda (mas por baixo da borda na ordenação-z).

`padding-box`

Nenhum fundo é desenhado abaixo da borda (o fundo se extende até a borda externa do preenchimento).

`content-box`

O fundo é desenhado dentro (cortado) a caixa de conteúdo.

`text`
Experimental

O fundo é desenhado dentro (cortado) do texto aparente.

### Sintaxe formal
```

background-clip =
  <visual-box># (en-US)

<visual-box> =
  content-box  | (en-US)
  padding-box  | (en-US)
  border-box

```

Exemplos
--------

### Usando `border-box`

#### Conteúdo HTML

```html
<p>O fundo se extende atrás da borda.</p>
```

#### Conteúdo CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: border-box;
}
```

#### Resultado

### Usando `padding-box`

#### Conteúdo HTML

```html
<p>O fundo se extende até dentro da fronteira da borda.</p>
```

#### Conteúdo CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: padding-box;
}
```

#### Resultado

### Usando `content-box`

#### Conteúdo HTML

```html
<p>O fundo se extende somente até o limite da caixa de conteúdo.</p>
```

#### Conteúdo CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: content-box;
}
```

#### Resultado

### Usando `text`

#### Conteúdo HTML

```html
<p>O fundo se extende dentro do texto.</p>
```

#### Conteúdo CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;

  /\* Note a necessidade de adicionar trânsparência ao texto\*/
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-clip |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `clip` (en-US)
* CSS Box Model


hifens - CSS

hifens
======

A propriedade CSS **`hyphens`** especifica como palavras devem ser hifenizadas quando o há quebra de texto em múltiplas linhas. Você pode prevenir a hifenização completamente, especificar pontos manualmente, ou permitir que o navegador insira automaticamente quando apropriado.

```css
hyphens: none;
hyphens: manual;
hyphens: auto;

/\* Valores globais \*/
hyphens: inherit;
hyphens: initial;
hyphens: unset;
```

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo `lang`, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo `xml:lang.`

**Nota:** As regras que definem como a hifenização é realizada não são explicitamente definidas pela especificação, então a hifenização exata pode variar de navegador para navegador.

|  |  |
| --- | --- |
| Initial value | `manual` |
| Aplica-se a | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Sintaxe
-------

A propriedade `hyphens` é especificada como uma única palavra-chave escolhida da lista abaixo.

### Valores

`none`

Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.

`manual`

Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo Oportunidades sugeridas de quebra de linha para mais detalhes.

`auto`

O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja Oportunidades sugeridas de quebra de linha abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.

**Nota:** O comportamento da configuração `auto` requer que a propriedade idioma seja indicada corretamente para que as regras de hifenização sejam selecionadas. Você deve especificar o idioma utilizando o atributo HTML `lang` para garantir que a hifenização automática seja aplicada na linguagem de sua escolha.

Oportunidades sugeridas de quebra de linha
------------------------------------------

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

U+2010 (HYPHEN)

O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.

U+00AD (SHY)

Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar `` para inserir um hífen suave.

### Sintaxe formal
```

hyphens =
  none    | (en-US)
  manual  | (en-US)
  auto

```

Exemplo
-------

Este exemplo usa três classes, uma para cada configuração possível da propriedade `hyphens`.

```html
<ul>
  <li>
    <code>none</code>: sem hífen; transbordar se necessário
    <p lang="en" class="none">An extremely long English word</p>
  </li>
  <li>
    <code>manual</code>: hífen apenas em &hyphen; ou &shy; (se
    necessário)
    <p lang="en" class="manual">An extremely long English word</p>
  </li>
  <li>
    <code>auto</code>: hífen onde o algorítmo decidir (se necessário)
    <p lang="en" class="auto">An extremely long English word</p>
  </li>
</ul>
```

```css
p {
  width: 55px;
  border: 1px solid black;
}
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Text Module Level 3 # hyphens-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `content`


::backdrop - CSS

::backdrop
==========

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Cada elemento na camada superior de uma pilha de elementos possui um `pseudo-elemento` *`::backdrop`*. Esse pseudo-elemento é uma caixa renderizada imediatamente abaixo do elemento superior (e acima do elemento logo abaixo desse elemento, caso exista algum), dentro da camada superior.

**Nota:** O pseudo-elemento `::backdrop` pode ser utilizado para criar um pano de fundo que esconde o conteúdo por trás de um elemento posicionado no topo de uma pilha de elementos. Por exemplo, para o elemento que é mostrado em tela cheia conforme descrito nessa especificação.

Ele não herda de nenhum elemento e também não é herdado. Não há restrição de propriedades que podem ser aplicadas a esse pseudo-elemento.

Especificações
--------------

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

Copatibilidade com navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `:fullscreen` (en-US)
* `<dialog>`


backface-visibility - CSS

backface-visibility
===================

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Sumário
-------

A propriedade CSS **`backface-visibility`** determina se deve ser exibido ou não a parte de trás do elemento para o usuário. A parte de trás de um elemento é sempre um fundo transparente, deixando, quando visível, uma imagem espelho da parte da frente a ser exibida.

Há casos quando nós não queremos que a parte da frente de um elemento seja visível pela parte de trás, quando estamos fazendo um efeito de giro de cartões (colocando dois elementos lado a lado).

Esta propriedade não possui nenhum efeito em transformações 2D quando não há nenhum tipo de perspectiva.

|  |  |
| --- | --- |
| Initial value | `visible` |
| Aplica-se a | qualquer elemento transformavel |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Sintaxe
-------

```css
backface-visibility: visible;
backface-visibility: hidden;
```

### Valores

Esta propriedade tem dois valores (exclusivos):

* `visible` significa que a parte de trás estará visível, permitindo que a parte da frente seja exibida como espelho
* `hidden` significa que a parte de trás não é visível, sendo então escondida pela parte da frente do elemento
### Sintaxe formal
```

backface-visibility =
  visible  | (en-US)
  hidden

```

Exemplos
--------

### Cubos com faces transparentes

#### Conteúdo HTML

```html
<table>
  <tbody>
    <tr>
      <th><code>backface-visibility: visible;</code></th>
      <th><code>backface-visibility: hidden;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube showbf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>
          Todas as faces são transparentes e há três faces atrás que estão
          visíveis através das faces da frente.
        </p>
      </td>
      <td>
        <div class="container">
          <div class="cube hidebf">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
        <p>
          Nenhuma face é opaca, mas as três faces de trás estarão sempre
          escondidas agora.
        </p>
      </td>
    </tr>
  </tbody>
</table>
```

#### Conteúdo CSS

```css
/\* Shorthand classes that will show or hide the three back faces of the "cube" \*/
.hidebf div {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.showbf div {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  -webkit-perspective: 300px;
  -webkit-perspective-origin: 150% 150%;
  -webkit-transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # backface-visibility-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando transformações CSS


content - CSS

content
=======

A propriedade CSS **`content`** é usada com os pseudoelementos `::before` e `::after` para gerar conteúdo em um elemento. Objetos inseridos usando a propriedade `content` são *elementos substituídos (en-US) anônimos*.

```css
/\* Palavras-chave que não podem ser combinadas com outros valores \*/
content: normal;
content: none;

/\* Valores <string> com caracteres especiais devem ser escritos \*/
/\* com escape Unicode, por exemplo \00A0 para   \*/
content: "prefixo";

/\* Valores <url> \*/
content: url("http://www.example.com/test.png");

/\* Valores <counter> \*/
content: counter(contador_capitulo);
content: counters(contador_secao, ".");

/\* Valores attr() associados ao valor do atributo HTML \*/
content: attr(valor string);

/\* Palavras-chave que variam com o idioma e posição \*/
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/\* Com exceção de normal e none, vários valores \*/
/\* podem ser usados simultaneamente \*/
content: open-quote chapter_counter;

/\* Valores globais \*/
content: inherit;
content: initial;
content: unset;
```

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | All elements, tree-abiding pseudo-elements, and page margin boxes |
| Inherited | não |
| Computed value | On elements, always computes to `normal`. On `::before` and `::after`, if `normal` is specified, computes to `none`. Otherwise, for URI values, the absolute URI; for `attr()` values, the resulting string; for other keywords, as specified. |
| Animation type | discrete |

Sintaxe
-------

### Valores

`none`

O pseudoelemento não será gerado.

`normal`

Equivalente a `none` para os pseudoelementos `::before` e `::after`.

`<string>` (en-US)

Um ou mais caracteres de texto.

`<url>()` (en-US)

Uma URL que designa um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele será ignorado ou um *placeholder* será exibido no seu lugar.

`<counter>()` (en-US)

O valor de um contador CSS, geralmente um número. Ele pode ser exibido usando a função `counter()` (en-US) ou `counters()` (en-US).

A função `counter()` tem duas formas: 'counter(*nome*)' ou 'counter(*nome*, *estilo*)'. O texto gerado será o valor do contador mais próximo do nome fornecido no pseudoelemento. Ele será formatado com o estilo especificado (o padrão é `decimal`).

A função `counters()` também tem duas formas: 'counters(*nome*, *string*)' ou 'counters(*nome*, *separador*, *estilo*)'. O texto gerado será o valor de todos os contadores com o mesmo nome no escopo do pseudoelemento, do mais afastado ao mais próximo, separados pelo separador especificado. Os contadores serão exibidos no estilo indicado (o padrão é `decimal`).

`attr(x)`

O valor do atributo `x` do elemento. Se não houver um atributo `x`, uma *string* vazia será retornada. A diferenciação de maiúsculas e minúsculas dependerá da linguagem do documento.

`open-quote` | `close-quote`

Esses valores serão substituídos pela *string* apropriada da propriedade `quotes` (en-US).

`no-open-quote` | `no-close-quote`

Não introduzem nenhum conteúdo, mas aumentam (ou diminuem) o nível de aninhamento de aspas.

### Sintaxe formal
```

content =
  normal                                              | (en-US)
  none                                                | (en-US)
  [ (en-US) <content-replacement> | (en-US) <content-list> ] (en-US) [ (en-US) / [ (en-US) <string> (en-US) | (en-US) <counter> ] (en-US)+ (en-US) ] (en-US)? (en-US)  | (en-US)
  <element()>

<content-replacement> =
  <image>

<content-list> =
  [ (en-US) <string> (en-US) | (en-US) <counter()> | (en-US) <counters()> | (en-US) <content()> | (en-US) <attr()> ] (en-US)+ (en-US)

<counter> =
  <counter()>   | (en-US)
  <counters()>

<element()> =
  element( <id-selector> )

<image> =
  <url>       | (en-US)
  <gradient> (en-US)

<counter()> =
  counter( <counter-name> , <counter-style>? (en-US) )

<counters()> =
  counters( <counter-name> , <string> (en-US) , <counter-style>? (en-US) )

<content()> =
  content( [ (en-US) text | (en-US) before | (en-US) after | (en-US) first-letter | (en-US) marker ] (en-US)? (en-US) )

<attr()> =
  attr( <attr-name> <attr-type>? (en-US) , <declaration-value>? (en-US) )

<id-selector> =
  <hash-token>

<url> =
  <url()>  | (en-US)
  <src()>

<counter-style> =
  <counter-style-name>  | (en-US)
  <symbols()>

<attr-name> =
  [ (en-US) <ident-token> '|' ] (en-US)? (en-US) <ident-token>

<attr-type> =
  string            | (en-US)
  url               | (en-US)
  ident             | (en-US)
  color             | (en-US)
  number            | (en-US)
  percentage        | (en-US)
  length            | (en-US)
  angle             | (en-US)
  time              | (en-US)
  frequency         | (en-US)
  flex              | (en-US)
  <dimension-unit>

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

<symbols()> =
  symbols( <symbols-type>? (en-US) [ (en-US) <string> (en-US) | (en-US) <image> ] (en-US)+ (en-US) )

<symbols-type> =
  cyclic      | (en-US)
  numeric     | (en-US)
  alphabetic  | (en-US)
  symbolic    | (en-US)
  fixed

```

Exemplos
--------

### Cabeçalhos e citações

Este exemplo insere aspas ao redor de citações e adiciona a palavra "Capítulo" antes dos cabeçalhos.

#### HTML

```html
<h1>5</h1>
<p>
  De acordo com o Sr. Tim Berners-Lee,
  <q cite="https://www.w3.org/People/Berners-Lee/FAQ.html#Internet"
 >I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.</q
 >
  Devemos entender que não há nada fundamentalmente errado em criar algo com
  base nas contribuições de outras pessoas.
</p>

<h1>6</h1>
<p>
  De acordo com o Manifesto Mozilla,
  <q cite="https://www.mozilla.org/about/manifesto/"
 >As pessoas precisam ter a capacidade de moldar a Internet e suas
    experiências com ela.</q
 >
  Portanto, podemos concluir que contribuir para a Web aberta pode proteger
  nossas próprias experiências individuais nela.
</p>
```

#### CSS

```css
q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before {
  content: "Cap\00EDtulo "; /\* O espaço no final cria uma separação
 entre o conteúdo adicionado e o
 resto do conteúdo \*/
}
```

#### Resultado

### Imagem combinada com texto

Este exemplo insere uma imagem antes do *link*. Se a imagem não for encontrada, o texto será exibido no seu lugar.

#### HTML

```html
<a href="https://www.mozilla.org/">Mozilla Home Page</a>
```

#### CSS

```css
a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}
```

#### Resultado

### Alterando classes específicas

Este exemplo insere texto adicional no final de itens especiais em uma lista.

#### HTML

```html
<h2>Categoriass mais vendidas</h2>
<ol>
  <li>Suspenses políticos</li>
  <li class="new-entry">Histórias de terror</li>
  <li>Biografias</li>
  <li class="new-entry">Romances de Vampiros</li>
</ol>
```

#### CSS

```css
.new-entry::after {
  content: " Novo!"; /\* O espaço no final cria uma separação
 entre o conteúdo adicionado e o
 resto do conteúdo \*/
  color: red;
}
```

#### Resultado

### Imagens e atributos de elementos

Este exemplo insere uma imagem antes de cada *link* e adiciona o conteúdo do seu atributo `id` depois.

#### HTML

```html
<ul>
  <li><a id="moz" href="http://www.mozilla.org/"> Mozilla Home Page</a></li>
  <li>
    <a id="mdn" href="https://developer.mozilla.org/">
      Mozilla Developer Network</a
 >
  </li>
</ul>
```

#### CSS

```css
a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
}

#mdn::before {
  content: url("mdn-favicon16.png");
}

li {
  margin: 1em;
}
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Generated Content Module Level 3 # content-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `::after`
* `::before`
* `quotes` (en-US)


@charset - CSS

@charset
========

`<string>` (en-US)Resumo
------

A regra `@charset` especifica a codificação de caracteres utilizada na folha de estilo. Deve ser o primeiro elemento na folha de estilo e não ser precedida de qualquer caráter; uma vez que não é uma declaração aninhada, ele não pode ser usado dentro de um grupo condicional de regras. Se vários `@charset` são definidos, apenas o primeiro é usado, e não pode ser usado dentro de um atributo de estilo em um elemento HTML ou dentro do elemento `<style>`, onde o conjunto de caracteres da página HTML é relevante.

Esta regra at (at-rule) é útil quando se usa caracteres não ASCII em algumas propriedades CSS, como conteúdo.

Como existem várias maneiras de definir a codificação de caracteres em uma folha de estilo, o navegador vai tentar os seguintes métodos na seguinte ordem (e parar assim que um produzir um resultado):

1. O valor do carácter de ordem de byte Unicode colocado no início do arquivo.
2. O valor dado pelo atributo `charset` do `Content-Type:` cabeçalho HTTP ou o equivalente no protocolo usado para servir a folha de estilo.
3. O `@charset` CSS.
4. Use a codificação de caracteres definidos pelo documento referente: o atributo charset do elemento `<link>`. Este método é obsoleto em HTML5 e não deve ser utilizado.
5. Assume que o documento é UTF-8.
Sintaxe
-------
```

  @charset charset;
```

onde :

*charset*

É uma `<string>` (en-US) denotando a codificação de caracteres a ser usado. Ele deve ser o nome de uma codificação de caracteres segura para a Web definido no registro IANA. Se vários nomes estão associados com uma codificação, apenas um é marcado como *preferido* e assim ser utilizado.

Exemplos
--------

```css
@charset "UTF-8"; /\* Define a codificação da folha de estilo para Unicode UTF-8 \*/
@charset 'iso-8859-15'; /\* Define a codificação da folha de estilo para Latin-9 (línguas da Europa Ocidental, com sinal de euro) \*/
 @charset "UTF-8"; /\* Inválido, há um caracter (espaço) antes da regra \*/
@charset UTF-8; /\* Inválido, sem ‘ ou ", o conjunto de caracteres não é uma <string> (en-US) CSS \*/
```

Especificações
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

Compatibilidade de navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


white-space - CSS

white-space
===========

Resumo
------

A propriedade CSS white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Sintaxe
-------
```

Formal syntax:
```
white-space =
  normal        | (en-US)
  pre           | (en-US)
  nowrap        | (en-US)
  pre-wrap      | (en-US)
  break-spaces  | (en-US)
  pre-line

```

```
```

white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line

white-space: inherit
```

### Valores

`normal`

Sequências de espaços em branco são recolhidas. Caracteres de nova linha no código são tratados como outros espaços em branco. As linhas quebram conforme a necessidade para preencher as linhas das caixas (boxes).

`nowrap`

Recolhe os espaços em branco como no normal, mas suprime as quebras de linha (quebra de texto) no texto.

`pre`

Sequências de espaço em branco são preservadas, linhas são quebradas apenas em carateres de nova linha no código e em elementos `<br>`.

`pre-wrap`

Sequências de espaço em branco são preservadas. Linhas são quebradas em caracteres de nova linha, em `<br>` e quando necessário para preencher as linhas das caixas (boxes).

`pre-line`

Sequências de espaços em branco são recolhidas. Linhas são quebradas em caracteres de nova linha, em `<br>` e quando necessário para preencher as linhas das caixas (boxes).

A tabela a seguir resume o comportamento dos valores para white-space:

|  | Novas linhas | Espaços e Tabulações (tabs) | Quebra de texto |
| --- | --- | --- | --- |
| `normal` | Recolhido | Recolhido | Quebra |
| `nowrap` | Recolhido | Recolhido | Sem quebra |
| `pre` | Preservado | Preservado | Sem quebra |
| `pre-wrap` | Preservado | Preservado | Quebra |
| `pre-line` | Preservado | Recolhido | Quebra |

Exemplos
--------

```css
code {
  white-space: pre;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

Compatibilidade de Navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

 [1] Internet Explorer 5.5+ suporta `word-wrap``: break-word;`
 O código a seguir permite quebras de linhas dentro de elementos pre:

```css
pre {
  word-wrap: break-word; /\* IE 5.5-7 \*/
  white-space: -moz-pre-wrap; /\* Firefox 1.0-2.0 \*/
  white-space: pre-wrap; /\* current browsers \*/
}
```


@layer - CSS

@layer
======

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A regra at (at-rule) **`@layer`** define uma *camada de cascata*. Dentro dessa camada, as regras CSS fazem parte da mesma cascata, dando mais controle sobre as cascatas para os desenvolvedores web.

```css
@layer utilitarios {
  /\* cria uma nova camada CSS chamada "utilitarios". \*/
}
```

Sintaxe
-------

Você pode utilizar o `@layer` para criar uma camada de cascata de três maneiras. A primeira é como no exemplo acima, criando um bloco com o `@layer` e inserindo as regras CSS dentro deste bloco.

```css
@layer utilitarios {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}
```

A camada de cascata também pode ser criada com o `@import`, neste caso as regras estarão no arquivo CSS importado:

```css
@import (utilitarios.css) layer(utilitarios);
```

Você também pode criar uma camada de cascata nomeada sem atrelar à nenhum estilo. Você pode definir uma única camada:

```css
@layer utilitarios;
```

Ou, múltiplas camadas de uma vez só, como por exemplo:

```css
@layer temas, layout, utilitarios;
```

Isto pode ser útil pois a ordem inicial na qual as camadas são declaradas definem qual camada tem preferência. Assim como declarações, a última camada a ser definida terá preferência se declarações concorrentes forem encontradas em múltiplas camadas. Aplicando ao exemplo anterior, se uma regra conflitante estiver nas camadas `temas` e `utilitarios`, a regra encontrada no `utilitarios` é a vencedora e será aplicada.

A regra definida no `utilitarios` será aplicada *mesmo se tiver especificidade mais baixa* que a regra em `tema`. Isso ocorre pois uma vez que a ordem das camadas é estabelecida, especificidade e ordem de aparição das regras são ignoradas. Isso nos permite criar seletores CSS mais simples, já que você não precisa se preocupar tanto se um seletor CSS terá especificidade alta o suficiente para sobrescrever regras concorrentes, você só precisa verificar se a sua regra está localizada em uma camada definida posteriormente.

**Nota:** Ao declarar o nome de suas camadas e sua ordem, você pode adicionar regras CSS para a camada re-declarando seu nome. Os estilos serão incluídos na camadas e a ordenação das camadas não será modificada.

Qualquer estilo que não está atrelado à nenhuma camada são reunidos em uma mesma camada anônima que tem preferência à todas as outras camadas declaradas. Isso significa que qualquer estilo declarado fora de uma camada sobrescreve os estilos declarados em uma camada.

### Aninhando camadas

Camadas podem ser aninhadas (nested), como no exemplo abaixo:

```css
@layer framework {
  @layer layout {
  }
}
```

Para juntas as regras da camada `layout` dentro de `framework`, junte os dois nomes com um `.`.

```css
@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}
```

### Camadas anônimas

Se uma camada não tiver seu nome declarado, como por exemplo:

```css
@layer {
  p {
    margin-block: 1rem;
  }
}
```

Então uma camada anônima é criada. Ela funciona da mesma maneira das camadas nomeadas, porém novas regras não podem ser adicionadas à essa camada.

Sintaxe formal
--------------
```

@layer =
  @layer <layer-name>? (en-US) { <rule-list> }  | (en-US)
  @layer <layer-name># (en-US) ;

<layer-name> =
  <ident> (en-US) [ (en-US) '.' <ident> (en-US) ] (en-US)\* (en-US)

```

Exemplos
--------

### Exemplo simples

No exemplo seguinte, duas regras CSS são criadas. Uma para o elemento `<p>` fora de qualquer layer, e outra dentro de uma camada chamada `tipo` com o seletor `.caixa p`.

Sem camadas, o seletor `.caixa p` teria a maior especificidade, então o texto 'Olá, mundo!' seria mostrado em verde. Mas como a camada `tipo` vem antes da camada anônima criada para agrupar todos as regras sem camada definida, o texto será mostrado roxo.

Perceba também a ordem. Mesmo se declararmos um estilo sem camada primeiro, ele ainda é aplicado *depois* dos estilos com camada.

#### HTML

```html
<div class="caixa">
  <p>Olá, mundo!</p>
</div>
```

#### CSS

```css
p {
  color: rebeccapurple;
}

@layer tipo {
  .caixa p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}
```

#### Resultado

### Declarando regras para camadas pré-existentes

No exemplo seguinte, duas camadas são criadas sem regras definidas, e depois são aplicadas regras CSS para as duas camadas. A camada `base` define as propriedades color, border, font-size e padding. A camada `especial` layer define um valor de color diferente. Como o `especial` vem depois na definição das camadas, a cor que ele carrega é utilizada e o texto será mostrado com a cor `rebeccapurple`. Todas as outras regras da camada `base` ainda são aplicadas.

#### HTML

```html
<div class="item">
  Eu estou sendo mostrado com <code>color: rebeccapurple</code> pois a camada
  <code>especial</code> vem depois da camada <code>base</code>. Minha borda
  verde, font-size, e padding vem da camada <code>base</code>.
</div>
```

#### CSS

```css
@layer base, especial;

@layer especial {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # layering |

Compatibilidade de Navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* The Future of CSS: Cascade Layers


:visited - CSS

:visited
========

O **`:visited`** é uma Pseudo-classe do CSS para indicar se o link em questão já foi visitado pelo usuário. Por questões de privacidade, os styles que podem ser modificados usando este seletor são muito limitados.

```css
/\* Seleciona qualquer <a> que poderá ser visitado \*/
a:visited {
  color: green;
}
```

Styles definidos pela pseudo-classe `:visited` vão ser substituidos por qualquer pseudo-classe relacionada ao link subsequente (`:link`, `:hover`, ou `:active`) que tenha ao menos uma especificação igual. Para estilizar links apropriadamente, garantindo assim seu funcionamento adequado, ponha a regra `:visited` depois da regra `:link` mas antes das regras `:hover` e `:active` , Pode-se definir pela ordem *LVHA*: `:link` — `:visited` — `:hover` — `:active`.

Restrições de Estilo
--------------------

Por razões de privacidade, navegadores limitam estritamente quais estilos você pode aplicar usando esta pseudo-class, como elas podem ser usadas:

* Propriedades admicíveis no CSS são:
    + `color`;
    + `background-color`;
    + `border-color` (en-US);
    + `border-bottom-color` (en-US);
    + `border-left-color` (en-US);
    + `border-right-color` (en-US);
    + `border-top-color` (en-US);
    + `column-rule-color` (en-US);
    + `outline-color` (en-US).
* Atributos SVG admissíveis são `fill` e `stroke (en-US)`.
* Os componentes alpha permitidos de estilos seram ignorados. Ao invés disso, o componente alpha do elemento de estado non-`:visited` será usado, exceto quando o componente é `0`, no qual o estilo definido em `:visited` será inteiramente ignorado.
* Embora esses estilos podem mudar como as cores serão mostradas ao usuário, o método `window.getComputedStyle` (en-US) vai mentir e sempre retornar o valor da cor em non-`:visited.`

**Nota:** Para mais informações quanto a essas limitações e as razões por trás delas, veja Privacy and the :visited selector (en-US). Obs: No momento estará apenas disponível em inglês.

Syntaxe
-------

```css
a {
  background-color: white;
  border: 1px solid white;
}
a:visited {
  background-color: lightblue;
  border-color: cyan;
  color: darkblue;
}
```

Exemplo
-------

Propriedades que de alguma forma não tenha cor ("color") definida, ou seja transparente, não podem ser modificadas como o `:visited`. Das propriedades que podem ser definidas por essa pseudo-classe, seu navegador provavelmente terá por padão valores para `color` e `column-rule-color` somente. Portanto, se você quiser modificar outras propriedades, você necessitará pré-definir os valores fora do seletor `:visited`.

### HTML

```html
<a href="#">Você já visitou este link?</a>
<br />
<a href="">Você já visitou este link.</a>
```

### CSS

```css
a {
  /\* Specifica non-transparent por padrão para algumas
 propriedades, permitindo-os a serem estilizados pelo
 estado :visited \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também (inglês)
--------------------

* Privacy and the :visited selector (en-US)
* Link-related pseudo-classes: `:link`, `:active`, `:hover`


::-webkit-scrollbar - CSS

::-webkit-scrollbar
===================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

O pseudo-elemento CSS `:-webkit-scrollbar` afeta o estilo de um elemento referente a barra de rolagem quando se tem por definido `overflow:scroll;`.

**Nota:** Se o `overflow:scroll;` não estiver definido nenhuma barra de rolagem será exibida.

**Nota:** `::-webkit-scrollbar` está disponível somente em navegadores baseados em Blink - e WebKit - (Chrome, Edge, Opera, Safari, todos os navegadores para iOS, e outros). Um método padronizado para estilização de barras de rolagem está disponível com `scrollbar-color` e `scrollbar-width` (en-US).

Seletores CSS da Barra de Rolagem
---------------------------------

Você pode usar os seguintes pseudo-elementos para customizar diversas partes da barra de rolagem para navegadores baseados em webkit:

* `::-webkit-scrollbar` — a barra de rolagem inteira.
* `::-webkit-scrollbar-button` — os botões na barra (setas para cima e para baixo no qual rolam uma linha de cada vez).
* `::-webkit-scrollbar-thumb` — a barra arrastável de rolagem.
* `::-webkit-scrollbar-track` — o caminho (barra de progresso) da barra de rolagem onde há uma barra cinza encima de uma barra branca.
* `::-webkit-scrollbar-track-piece` — a parte do caminho (barra de progresso) não coberto por uma barra.
* `::-webkit-scrollbar-corner` — o canto inferior da barra de rolagem, onde ambas barras horizontal e vertical se encontram. Muitas das vezes o canto inferior direito da janela do navegador.
* `::-webkit-resizer` — a barra redimensionável que aparece no canto inferior de alguns elementos.
Exemplos
--------

### CSS

```css
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/\* Demonstração de uma barra de rolagem personalizada
 \* (não será visível ao menos que a largura/altura seja especificada) \*/
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /\* ou que isso seja adicionado ao "caminho" da barra \*/
}

/\* Adiciona a barra arrastável \*/
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000;
}
```

### HTML

```html
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
  Proin at nulla elementum, consectetur ex eget, commodo ante.
  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
  mattis cursus dolor. Pellentesque id pretium est. Quisque
  convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
</div>

<div class="invisible-scrollbar">
Estaéumapalavramuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuitolonga
</div>

<div class="mostly-customized-scrollbar">
Estaéumapalavramuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuitolonga<br>
E bem alta<br>
com uma barra de rolagem estranha.<br>
Quem diria que barras de rolagem poderiam ser estraaaanhas?
</div>
```

### Resultado

Especificações
--------------

Não é parte de nenhum padrão.

Compatibilidade entre navegadores
---------------------------------

### `::-webkit-scrollbar`

### css.selectors.-webkit-scrollbar

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-button

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-thumb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track-piece

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-corner

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-resizer

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### `::-webkit-scrollbar-button`

### css.selectors.-webkit-scrollbar

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-button

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-thumb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track-piece

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-corner

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-resizer

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### `::-webkit-scrollbar-thumb`

### css.selectors.-webkit-scrollbar

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-button

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-thumb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track-piece

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-corner

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-resizer

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### `::-webkit-scrollbar-track`

### css.selectors.-webkit-scrollbar

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-button

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-thumb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track-piece

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-corner

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-resizer

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### `::-webkit-scrollbar-track-piece`

### css.selectors.-webkit-scrollbar

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-button

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-thumb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track-piece

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-corner

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-resizer

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### `::-webkit-scrollbar-corner`

### css.selectors.-webkit-scrollbar

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-button

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-thumb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track-piece

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-corner

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-resizer

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### `::-webkit-resizer`

### css.selectors.-webkit-scrollbar

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-button

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-thumb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-track-piece

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-scrollbar-corner

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.-webkit-resizer

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* WebKit blog em Estilizando barras de rolagem
* Testando WebKit para os estilos da barra de rolagem mencionados acima
* `scrollbar-width` (en-US)
* `scrollbar-color`


inline-size - CSS

inline-size
===========

**Experimental:** **Esta é uma tecnologia experimental (en-US)**
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A propriedade do CSS **`inline-size`** define o tamanho horizontal e vertical de um elemento bloco. Ele é correspondente a cada propriedade `width` ou a `height`, dependendo do valor de `writing-mode`.

```css
/\* <length> values \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> values \*/
inline-size: 75%;

/\* Keyword values \*/
inline-size: 25em border-box;
inline-size: 75% content-box;
inline-size: max-content;
inline-size: min-content;
inline-size: available;
inline-size: fit-content;
inline-size: auto;

/\* Global values \*/
inline-size: inherit;
inline-size: initial;
inline-size: unset;
```

Se o writing mode é orientado verticalmente, o valor de `inline-size` relaciona a altura do elemento; ao contrário, está relacionado a largura do elemento. A propriedade relacionada é a `block-size`, no qual define a outra dimensão do elemento.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | same as `width` and `height` |
| Inherited | não |
| Percentages | inline-size of containing block |
| Computed value | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

Sintaxe
-------

### Valores

A propriedade `inline-size` aproveita os mesmos valores que as propriedades `width` e `height`.

### Sintaxe formal
```

inline-size =
  <'width'>

```

Exemplo
-------

### HTML

```html
<p class="exampleText">Texto de Exemplo</p>
```

### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* As propriedades físicas mapeadas: `width` e `height`
* `writing-mode`


:active - CSS

:active
=======

A pseudo-classe css <strong> :active </strong>
Esse estilo pode ser substituído por qualquer outra pseudo-classe relacionada ao link, ou seja, `:link`, `:hover` e `:visited`, aparecendo nas regras subseqüentes. Para estilizar apropriadamente os links, você precisa colocar a regra `:active` depois de todas as outras regras relacionadas ao link, conforme definido pela ordem LVHA. `:link` — `:visited` — `:hover` — `:active`.

**Nota:** Em sistemas com mouses com vários botões, o CSS 3 especifica que a pseudo-classe :active só deve ser aplicada ao botão principal em mouses destros, este é tipicamente o botão mais à esquerda.

Exemplo
-------

### HTML

```html
<body>
  <h1>:active CSS selector example</h1>
  <p>
    The following link will turn lime during the time you click it and release
    the click: <a href="#">Mozilla Developer Network</a>.
  </p>
</body>
```

### CSS

```css
body {
  background-color: #ffffc9;
}
a:link {
  color: blue;
} /\* links não visitados \*/
a:visited {
  color: purple;
} /\* links visitados \*/
a:hover {
  font-weight: bold;
} /\* user hovers \*/
a:active {
  color: lime;
} /\* links ativos \*/
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Link-related pseudo-classes: `:link`, `:visited`, and `:hover`.


<display-listitem> - CSS

<display-listitem>
==================

O `list-item` palavra-chave faz com que o elemento gere um`::marker` pseudoelemento com o conteúdo especificado por sua `list-style` (en-US) propriedades (por exemplo, um marcador) junto com uma caixa principal do tipo especificado para seu próprio conteúdo.

Sintaxe
-------

Um valor único de `list-item` fará com que o elemento se comporte como um item da lista. Isso pode ser usado junto com`list-style-type` (en-US) e `list-style-position` (en-US).

`list-item` também pode ser combinado com qualquer `<display-outside>` palavra-chave e o `flow` ou `flow-root` `<display-inside>` palavras-chave.

**Nota:**: Nos navegadores que suportam a sintaxe de dois valores, se nenhum valor interno for especificado, o padrão será `flow`. Se nenhum valor externo for especificado, a caixa principal terá um tipo de exibição externo de`block`.

### Sintaxe formal
```

<display-listitem> =
  <display-outside>? (en-US)     && (en-US)
  [ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US)  && (en-US)
  list-item

<display-outside> =
  block   | (en-US)
  inline  | (en-US)
  run-in

```

Exemplo
-------

### HTML

```html
<div class="fake-list">I will display as a list item</div>
```

### CSS

```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

### Resultado

Compatibilidade com navegadores
-------------------------------

### Suporte delist-item

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`


Privacidade e o seletor :visited - CSS

Privacidade e o seletor :visited
================================

Antes de 2010, o seletor CSS `:visited` permitia que websites descobrissem o histórico de navegação dos usuários e quais sites estes haviam visitado. Isto foi feito por meio do `window.getComputedStyle` (en-US) e outras tecnicas. Este processo era fácil de ser feito, e tornou possível não somente determinar onde os usuários estiveram na internet, mas também poderia ser usado para descobrir um monte de informação sobre a identidade destes.

Para contornar este problema, Gecko 2 implementou atualizações de privacidade para limitar a quantidade de informações que poderiam ser obtidas através dos links visitados. Outros navegadores também fizeram mudanças similares.

Pequenas mentiras brancas
-------------------------

Para preservar a privacidade dos usuários, Firefox e outros navegadores irão mentir para aplicações webs sob certas circustâncias:

* O método `window.getComputedStyle`, e funções similares tal como `element.querySelector`, sempre retornarão valores indicando que os usuários nunca visitaram quaisquer links em uma página.
* Se você usa seletores como **seletores de irmãos** como `:visited + span`, o elemento imediato (`span` neste exemplo) será estilizado como se o link não houvesse sido visitado.
* Em raros casos, se você está utilizando elementos de links aninhados e o elemento que está sendo correspondido é diferente do link cuja presença no histórico está sendo testado, o elemento também será renderizado como se o link não houvesse sido visitado.
Limites para estilos de links visitados
---------------------------------------

Você pode estilizar links visitados, porém existem limites de quais estilos você pode usar. Somente os seguintes estilos podem ser aplicados para links visitados:

* `color`
* `background-color`
* `border-color` (en-US) (e suas subpropriedades)
* `column-rule-color` (en-US)
* `outline-color` (en-US)
* As partes de cor dos atributos `fill` e `stroke (en-US)`

Em adição, mesmo para os estilos acima, você não poderá alterar a transparência entre links visitados e não visitados, ou de outra maneira você seria capaz de usar `rgba()`, `hsla()`, ou a palavra chave `transparent`.

Aqui está um exemplo de como estilizar com as restrições acima mencionadas:

```css
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* O valor padrão de background-color é `transparent`. Você precisa
 especificar um valor diferente, caso contrário as mudanças
 feitas em :visited não se aplicam. \*/
}

:visited {
  outline-color: orange; /\* Links visitados tem contornos laranja \*/
  background-color: green; /\* Links visitados tem um fundo verde \*/
  color: yellow; /\* Links visitados tem texto amarelo \*/
}
```

Impacto nos desenvolvedores web
-------------------------------

No geral, essas restrições estas restrições não deveriam afetar desenvolvedores web tão significamente. Eles poderiam, como sempre, They may, no entanto, requerer essas seguintes mudanças nos sites existentes:

* Usar imagens de fundo para estilizar links baseados se eles foram visitados não irá funcionar, desde que apenas cores podem ser usadas para estilizar links visitados.
* As cores que são transparentes deixarão de aparecer se estilizados em seletores `:visited`.
Veja também
-----------

* privacy-related changes coming to CSS :visited em Mozilla Hacks (em inglês)
* Plugging the CSS History Leak em the Mozilla Security Blog (em inglês)
* Preventing attacks on a user's history through CSS :visited selectors (em inglês)


<number> - CSS

<number>
========

O tipo de dado CSS **`<number>`** representa um número, sendo esse ou um inteiro ou um componente fracional.

Sintaxe
-------

A sintaxe de `<number>` estende a sintaxe de `<integer>` (en-US). Um valor fracional é representado por um **`.`** seguido de um ou mais dígitos decimais e pode ser anexado a número inteiro. Não existe uma unidade associada aos números.

Interpolação
------------

Quando animado, os valores de `<number>` são interpolados como números reais e de ponto flutuante. A velocidade da interpolação é determinada pelo tempo da função (en-US) associada à animação.

Exemplos
--------

### Números Válidos

```css
12          Um <integer> puro é também um <number>.
4.01        Fração positiva
-456.8      Fração negativa
0.0         Zero
+0.0        Zero inciado por um +
-0.0        Zero iniciado por um -
.60         Um número fracional sem ser iniciado por zero
10e3        Notação científica
-3.4e-2     Notação científica complexa
```

### Números Inválidos

```css
12.         Números decimais devem ser seguidos por pelo menos um dígito.
+-12.2      Só um sinal +/- é permitido.
12.1.1      Só um ponto decimal é permitido.
```

Especificações
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # numbers |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `<integer>` (en-US)


Modelo de layout - CSS

Modelo de layout
================

O modelo de layout CSS, às vezes abreviado por *layout*, é um algoritimo que determina a posição e tamanho dos boxes baseado em como estes interagem com os boxes filhos e boxe ancestral. Há vários layouts:

* *Block layout*, designed for laying out documents. The block layout contains document-centric features, like the ability to *float* elements or to lay them out over *multiple columns* (en-US).
* *Inline layout*, designed for laying out text.
* *Table layout* (en-US), designed for laying out tables.
* *Positioned layout*, designed for positioning elements without much interaction with other elements.
* *Flexible box layout*, designed for laying out complex pages that can be resized smoothly.
* *Grid layout*, designed for laying out elements relative to a fixed grid.

**Nota:** Not all CSS properties apply to all *layout modes*. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.


grid-template-columns - CSS

grid-template-columns
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade `grid-template-columns` do CSS define os nomes das linhas e funções de dimensionamento (track sizing) do grid columns (en-US).

```css
/\* valores padrão \*/
grid-template-columns: none;

/\* exemplos de <track-list> \*/
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/\* exemplos de <auto-track-list> \*/
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* definições de herança \*/
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;
```

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | grid containers |
| Inherited | não |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

Sintaxe
-------

### Alternativas

`none`

Indica que não há uma grade explícita. Colunas serão automaticamente geradas e seu tamanho será determinado pela propriedade `grid-auto-columns` (en-US).

`<length>`

Tamanho não negativo.

`<percentage>`

 Is a non-negative `<percentage>` (en-US) value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto`.
 The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

`<flex>`

Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

`max-content`

Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

`min-content`

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

``minmax(min, max)` (en-US)`

Is a functional notation that defines a size range greater than or equal to *min* and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.

`auto`

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by `min-width` (en-US)/`min-height`) of the grid items occupying the grid track.

**Nota:**: `auto` track sizes (and only `auto` track sizes) can be stretched by the `align-content` and `justify-content` (en-US) properties.

``fit-content( [ <length> | <percentage> ] )` (en-US)`

Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )` (en-US)

Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.

### Sintaxe formal
```

grid-template-columns =
  none                       | (en-US)
  <track-list>               | (en-US)
  <auto-track-list>          | (en-US)
  subgrid <line-name-list>? (en-US)

<track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)

<auto-track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US) <auto-repeat> [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US)

<line-name-list> =
  [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)

<line-names> =
  '[' <custom-ident> (en-US)\* (en-US) ']'

<track-size> =
  <track-breadth>                                   | (en-US)
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<fixed-size> =
  <fixed-breadth>                                   | (en-US)
  minmax( <fixed-breadth> , <track-breadth> )       | (en-US)
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<auto-repeat> =
  repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<name-repeat> =
  repeat( [ (en-US) <integer [1,∞]> | (en-US) auto-fill ] (en-US) , <line-names>+ (en-US) )

<track-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  <flex [0,∞]>               | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

<length-percentage> =
  <length> (en-US)      | (en-US)
  <percentage> (en-US)

<fixed-breadth> =
  <length-percentage [0,∞]>

```

Exemplos
--------

### CSS

```css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Leia Mais
---------

* Propriedades CSS relacionadas: `grid-template-rows`, `grid-template-areas` (en-US), `grid-template` (en-US)
* Guia do *layout* em grade: *Basic concepts of grid layout - Grid Tracks*
* Tutorial em vídeo: *Defining a Grid*

1. **CSS**
2. **Referência do CSS**
3. CSS: Layout em grid
4. **Guia**
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement (en-US)
    4. Grid template areas (en-US)
    5. Layout using named grid lines (en-US)
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
5. **Propriedades**
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
6. **Glossário**
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)


background-origin - CSS

background-origin
=================

A propriedade CSS **`background-origin`** define *a área de posicionamento do plano de fundo*, isto é, a ponto de origem de uma imagem específica usando a propriedade `background-image` (en-US).

Experimente
-----------

Note que `background-origin` é ignorado quando `background-attachment` é `fixed`.

**Nota:** A taquigrafia `background` redefine o valor desta propriedade para seu valor inicial se esta não foi específicada.

Sintaxe
-------

```css
/\* Valores chave \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/\* Valores globais \*/
background-origin: inherit;
background-origin: initial;
background-origin: unset;
```

A propriedade `background-origin` é especificada por uma chave de valores listadas abaixo.

### Valores

`border-box`

O plano de fundo é posicionado relativamente nas bordas do elemento.

`padding-box`

O plano de fundo é posicionado relativamente no espaçamento do elemento.

`content-box`

O plano de fundo é posicionado relativamente para o conteúdo do elemento.

### Sintaxe formal
```

background-origin =
  <visual-box># (en-US)

<visual-box> =
  content-box  | (en-US)
  padding-box  | (en-US)
  border-box

```

Exemplos
--------

```css
.exemplo {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```

```css
#exemplo2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```

```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-origin |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `background-clip`


scroll-behavior - CSS

scroll-behavior
===============

A propriedade css **`scroll-behavior`** especifica o comportamento de rolagem para uma caixa de scrolling, quando a rolagem acontece devido às APIs do CSSOM. Qualquer outro scroll, aqueles que são executados pelo usuário, não são afetados por esta propriedade. Quando esta propriedade é especificada no elemento raiz, ela se aplica à viewport.

User agents podem ignorar essa propriedade.

```css
/\* Valores das palavras-chave \*/
scroll-behavior: auto;
scroll-behavior: smooth;

/\* Valores globais \*/
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
```

Note que qualquer outro scroll, tem essa tal performace para o usuario, essa propriedade não é afetada. Quando esta propriedade é especificada na raiz do elemento então aplicamos na instancia do viewport.

Os usuarios que agem com está propriedade pode ignora-lá.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | scrolling boxes |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

O `scroll-behavior` é uma propriedade específica, com um valor de uma palavra-chave listada abaixo.

### Valores

`auto`

A caixa de rolagem rola instantaneamente.

`smooth`

A caixa de scroll rola de forma suave usando uma função de temporização definida pelo usuário em um período de tempo. Os agentes do usuário devem seguir as convenções da plataforma, se houver.

### Sintaxe formal
```

scroll-behavior =
  auto    | (en-US)
  smooth

```

Exemplo
-------

### HTML

```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
```

### CSS

```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

### Saída

Especificações
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

Compatibilidade com navegador
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


height - CSS

height
======

Sumário
-------

A propriedade `height` do CSS determina a altura da área do conteúdo de um elemento. A área de conteúdo (en-US) consiste no `padding`, `margin` e `border` do elemento.

As propriedades `min-height` e `max-height` (en-US) sobrepõem a `height`.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | não |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| Computed value | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

Sintaxe
-------
```

Sintaxe formal: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | complex | auto
```

```
height: auto     /* auto keyword */

height: 120px    /* <length> values */
height: 10em

height: 75%      /* <percentage> values */

height: inherit
```

### Valores

`<length>`

Veja `<length>` (en-US) para unidades disponíveis.

`<percentage>`

Especificada como uma `<percentage>` (en-US) da altura do conteúdo do bloco.

`border-box`
Experimental

Se presente, o último `<length>` (en-US) ou `<percentage>` (en-US) é aplicado a caixa de borda do elemento.

`content-box`
Experimental

Se presente, o último `<length>` (en-US) ou `<percentage>` (en-US) é aplicado a caixa de conteúdo do elemento.

`auto`

O navegador calculará a altura do conteúdo especificado.

`max-content`
Experimental

A altura máxima intrínseca.

`min-content`
Experimental

A altura mínima intrínseca.

`available`
Experimental

Altura da caixa menos margem vertical, borda e padding.

`fit-content`
Experimental

O maior de:

* a altura mínima intrínseca
* a menor entre a altura intrínseca preferida e a altura disponível

Exemplos
--------

### HTML

```html
<div id="red">
  <span>I'm 50 pixels tall.</span>
</div>
<div id="green">
  <span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>
  </div>
</div>
```

### CSS

```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

Especificações
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* box model (en-US), `width`, `box-sizing`, `min-height`, `max-height` (en-US)


-moz-box-ordinal-group - CSS

-moz-box-ordinal-group
======================

**Aviso:** Essa propriedade é parte do projeto do módulo original do CSS Flexible Box Layout, e foi substituído em projetos recentes.

Veja Flexbox (en-US) para mais informações do que você deveria usar ao invés dessa propriedade.

Sumário
-------

Indica o grupo ordinal ao qual o elemento percente. Elementos com um grupo ordinal menor são mostrados antes daqueles com grupo ordinal maior.

Valores
-------

Os valores devem ser inteiros maiores que zero. O valor padrão para essa propriedade é 1.

Exemplos
--------

```css
#Flexbox {
  display: -ms-box;
  display: -moz-box;
  display: -webkit-box;
}

#text1 {
  background: red;
  -ms-box-ordinal-group: 4;
  -moz-box-ordinal-group: 4;
  -webkit-box-ordinal-group: 4;
}

#text2 {
  background: green;
  -ms-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
}

#text3 {
  background: blue;
  -ms-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
}

#text4 {
  background: orange;
}
```

```html
<div id="Flexbox">
  <div id="text1">text 1</div>
  <div id="text2">text 2</div>
  <div id="text3">text 3</div>
  <div id="text4">text 4</div>
</div>
```


::first-line (:first-line) - CSS

::first-line (:first-line)
==========================

O pseudoelemento **`::first-line`** aplica estilos à primeira linha de um elemento no nível do bloco. Observe que o comprimento da primeira linha depende de muitos fatores, incluindo a largura do elemento, a largura do documento e o tamanho da fonte do texto.

```css
/\* Seleciona a primeira linha dentro da tag <p> \*/
p::first-line {
  color: red;
}
```

**Nota:** O CSS3 introduziu a notação `::first-line`(com dois pontos) para distinguir pseudo-classes de pseudo-elementos. Os navegadores também aceitam `:first-line` introduzida no CSS2.

Propriedades permitidas
-----------------------

Somente um pequeno subconjunto de propriedades CSS pode ser usado com o`::first-line` pseudo-elemento:

* Todas as propriedades relacionadas à fonte: `font` (en-US), `font-kerning`, `font-style` (en-US), `font-variant` (en-US), `font-variant-numeric` (en-US), `font-variant-position` (en-US), `font-variant-east-asian` (en-US), `font-variant-caps` (en-US), `font-variant-alternates` (en-US), `font-variant-ligatures` (en-US), `font-synthesis` (en-US), `font-feature-settings`, `font-language-override` (en-US), `font-weight`, `font-size`, `font-size-adjust` (en-US), `font-stretch` (en-US), e `font-family`
* Todas as propriedades relacionadas ao background: `background-color`, `background-clip`, `background-image` (en-US), `background-origin`, `background-position` (en-US), `background-repeat` (en-US), `background-size`, `background-attachment`, e `background-blend-mode`
* A propriedade `color`
* `word-spacing` (en-US), `letter-spacing`, `text-decoration`, `text-transform`, e `line-height` (en-US)
* `text-shadow`, `text-decoration`, `text-decoration-color` (en-US), `text-decoration-line` (en-US), `text-decoration-style`, e `vertical-align`.
Sintaxe
-------

Error: could not find syntax for this itemExemplos
--------

### HTML

```html
<p>
  Os estilos serão aplicados apenas à primeira linha deste parágrafo. Depois
  disso, todo o texto será estilizado normalmente. Entendeu o que eu quis dizer?
</p>

<span
 >A primeira linha deste texto não receberá um estilo especial porque não é um
  elemento no nível do bloco.</span
>
```

### CSS

```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* AVISO: NÃO UTILIZE: \*/
  /\* Muitas propriedades são inválidas em pseudo-elementos ::first-line \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `::first-letter`


:focus-within - CSS

:focus-within
=============

A pseudo-classe CSS **`:focus-within`** representa um elemento que recebeu o foco ou contém um elemento que recebeu o foco. Em outras palavras, isto representa um elemento que é correspondido por si só pela pseudo-classe `:focus` ou tem um descendente que é correspondido por `:focus`. (Isto inclui descendentes em shadow trees (en-US).)

```css
/\* Seleciona uma <div> quando um de seus descendentes é focado \*/
div:focus-within {
  background: cyan;
}
```

Este seletor é útil, pegando um exemplo comum, para destacar um todo `<form>` (en-US) container quando o usuário focar em um de seus campos `<input>`.

Sintaxe
-------

Error: could not find syntax for this itemExemplo
-------

Neste exemplo, o formulário receberá estilos de coloração especiais quando o input de texto recebe o foco

### HTML

```html
<p>Tente digitar neste formulário.</p>

<form>
  <label for="given\_name">Given Name:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">Family Name:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS

```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### Resultado

Especificações
--------------

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `:focus`


:only-child - CSS

:only-child
===========

A pseudo-classe (en-US) de CSS **`:only-child`** representa um elemento sem nenhum elemento-irmão. É o mesmo que `:first-child:last-child` ou `:nth-child(1):nth-last-child(1)`, mas com uma especificidade mais baixa.

```css
/\* Seleciona cada <p>, mas apenas se for o \*/
/\* único filho de seu elemento-pai \*/
p:only-child {
  background-color: lime;
}
```

**Nota:** Originalmente, foi definido que o elemento selecionado deveria ter um elemento-pai. A partir de Selectors Level 4, isso não é mais necessário.

Sintaxe
-------

Error: could not find syntax for this itemExemplos
--------

### Exemplo básico

#### HTML

```html
<main>
  <div>
    <i>Eu sou um filho único solitário.</i>
  </div>

  <div>
    <i>Eu tenho irmãos.</i><br />
    <b>Eu também!</b><br />
    <span>Eu também tenho irmãos, <span>mas este é um filho único.</span></span>
  </div>
</main>
```

#### CSS

```css
main :only-child {
  color: red;
}
```

#### Resultado

### Exemplo de lista

#### HTML

```html
<ol>
  <li>
    Primeiro
    <ul>
      <li>Essa lista tem apenas um elemento.</li>
    </ul>
  </li>
  <li>
    Segundo
    <ul>
      <li>Essa lista tem três elementos.</li>
      <li>Essa lista tem três elementos.</li>
      <li>Essa lista tem três elementos.</li>
    </ul>
  </li>
</ol>
```

#### CSS

```css
li li {
  list-style-type: disc;
}
li:only-child {
  color: red;
  list-style-type: square;
}
```

#### Resultado

Especificações
--------------

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver também
----------

* `:only-of-type`
* `:first-child`
* `:last-child`
* `:nth-child`