recursal/MDN huggingface dataset:
:valid
======

A pseudo-classe CSS **`:valid`** representa qualquer `<input>` ou outro elemento do `<form>` (en-US) cujo conteúdo foi validado com sucesso. Isso permite, facilmente, adicionar uma aparência que ajude o usuário a identificar os campos validados.


```css
/\* Seleciona qualquer input válido \*/
input:valid {
  background-color: powderblue;
}
```


Essa pseudo-classe é útil para realçar os campos válidos para o usuário.

Sintaxe
-------

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

Veja `:invalid` para um exemplo.

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

| Specification |
| --- |
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-pseudos |

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

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

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

* Outras pseudo-classe relacionada com validação: `:required`, `:optional`, `:invalid`
* Form data validation (en-US)
font-kerning
============

A propriedade CSS **`font-kerning`** controla o o uso da informação de kerning, que é, o controle de como as letras serão espaçadas. A informação de kerning é armazenada na fonte, e se a fonte é *well-kerned*, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.

![Example of font-kerning](/pt-BR/docs/Web/CSS/font-kerning/font-kerning.png)


```css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/\* Global values \*/
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;
```


|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

Syntax
------

### Values

`auto`

This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value.

`normal`

This keyword requires kerning to be applied.

`none`

This keyword prevents the browser from using the kerning information stored in the font.

### Formal syntax
```

font-kerning =   
  auto    | (en-US)  
  normal  | (en-US)  
  none      
  
```

Examples
--------


```css
p {
  font-kerning: none;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-kerning-prop |

Browser Compatibility
---------------------

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

Kerning Demo
------------

### HTML Content


```html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
```

### CSS Content


```css
#nokern,
#kern {
  font-size: 2rem;
  font-family: serif;
}
#nokern {
  font-kerning: none;
}
#kern {
  font-kerning: normal;
}
```

### JS Content


```js
var input = document.getElementById("input"),
  kern = document.getElementById("kern"),
  nokern = document.getElementById("nokern");
input.addEventListener("keyup", function () {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});
kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;
```

See also
--------

* `font-variant` (en-US), `font-variant-position` (en-US), `font-variant-east-asian` (en-US), `font-variant-caps` (en-US), `font-variant-ligatures` (en-US), `font-variant-numeric` (en-US), `font-variant-alternates` (en-US), `font-synthesis` (en-US), `letter-spacing`.
<time>
======

O tipo de dado CSS **`<time>`** representa um valor de tempo expresso em segundo ou milissegundos. É usado em animações( `animation` ), transições( `transition` ) e propriedades relacionadas.

Sintaxe
-------

O tipo dado `<time>` consiste de um elemento `<number>` seguido por uma das unidades listadas abaixo. Opcionalmente, pode ser precedido por um sinal de `+` ou `-`. Como em todas as dimensões, não há espaço entre uma unidade literal e o número.

**Nota:** Embora o número `0` seja sempre o mesmo, independente da unidade, essa última não pode ser omitida. Em outras palavras, `0` é invalido e não representa `0s` ou `0ms`.

### Unidades

**`s`**

Representa um tempo em segundos. Exemplos: `0s`, `1.5s`, `-60s`.

**`ms`**

Representa um tempo em milissegundos. Exemplos: `0ms`, `150.25ms`, `-60000ms`.


**Nota:** A conversão entre `s` e `ms` segue a proporção `1s = 1000ms`.

Exemplos
--------

### Unidades de Tempo Válidas
```

12s         Inteiro Positivo
-456ms      Inteiro Negativo
4.3ms       Decimal
14mS        A unidade é case-insentive, embora letras iniciais maiúsculas (capital letters) não sejam recomendadas.
+0s         Zero com um + no inicio e uma unidade
-0ms        Zero com um - no inicio e uma unidade
```

### Unidades de Tempo Inválidas
```

0           Embora seja permitido o uso do zero sem unidade de medida por <length>s é invalido para <time>s.
12.0        Este é um <number>, não um <time>, pois está faltando a unidade de medida.
7 ms        Não é permitido espaço entre o número e a unidade de medida.
```

Specifications
--------------

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Tipos básicos de dados CSS
==========================

**Tipos básicos de dados CSS** definem valores típicos (incluindo palavras chaves e unidades) aceitos pelas propriedades e funções do CSS. Eles são um tipo especial de tipo de valor do componente.

Na sintaxe formal, os tipos de dados são indicados pela palavra chave aplicada entre os sinais de desigualdade "<" e ">".

Referência
----------

* `<angle>` (en-US)
* `<basic-shape>` (en-US)
* `<blend-mode>`
* `<color>`
* `<custom-ident>` (en-US)
* `<filter-function>` (en-US)
* `<flex>` (en-US)
* `<frequency>` (en-US)
* `<gradient>` (en-US)
* `<image>`
* `<integer>` (en-US)
* `<length>` (en-US)
* `<number>`
* `<percentage>` (en-US)
* `<position>` (en-US)
* `<ratio>` (en-US)
* `<resolution>` (en-US)
* `<shape-box>` (en-US)
* `<single-transition-timing-function>` (en-US)
* `<string>` (en-US)
* `<time>`
* `<transform-function>` (en-US)
* `<url>()` (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4  |
:not()
======

Resumo
------

A pseudo-classe CSS de **negação**, `:not(X)`, é uma notação funcional que recebe um seletor simples X como argumento. Ela seleciona um elemento que não é representado por seu argumento. *X* não pode conter outro seletor de negação.

**Nota:** Seletores inúteis podem ser escritos usando esta pseudo-classe. Por exemplo, `:not(*)` seleciona qualquer elemento que não é algum elemento, então a regra nunca é aplicada.

* É possível sobreescrever outras regras. E.g. `foo:not(bar)` vai selecionar os mesmos elementos do que o mais simples foo. No entanto a especificação é maior no exemplo com `:not`.
* `:not(foo){} vai selecionar tudo que não for foo`, **incluindo os elementos `<html>` e `<body>`.**
* Este seletor apenas se aplica a um elemento; não se pode usa-lo para excluir todos os seus ancestores. Por exemplo, `body :not(table) a` ainda vai ser aplicado a links dentro de tabelas, já que `<tr>` (en-US) vai ser selecionado pelo `:not()` do seletor.

Sintaxe
-------
```

:not(selector) { style properties }
```

Exemplos
--------


```css
p:not(.classico) {
  color: red;
}
body \*:not(p) {
  color: green;
}
```


Dado o CSS acima e o HTML abaixo...


```html
<p>Um pouco de texto.</p>
<p class="classico">Um pouco mais de texto.</p>
<span>Mais um texto</span>
```


Se obtém resultados como este:

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

| Specification |
| --- |
| Selectors Level 4 # negation |

Compatibilidade em Navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
min-height
==========

Sumário
-------

 A propriedade `min-height` do CSS é usado para definir a altura mínima de um determinado elemento. Ele impede que o valor usado da propriedade `height` se torne menor que o valor especificado para min-height.
 O valor de `min-height` substitui os dois `max-height` (en-US) e `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 percentage value is treated as `0`. |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |

Sintaxe
-------
```

sintaxe forma: 
```
min-height =   
  auto                                      | (en-US)  
  <length-percentage [0,∞]>                 | (en-US)  
  min-content                               | (en-US)  
  max-content                               | (en-US)  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length> (en-US)      | (en-US)  
  <percentage> (en-US)    
  
```


```
```

min-height: 3.5em
min-height: 10%
min-height: max-content
min-height: min-content
min-height: fit-content
min-height: fill-available

min-height: inherit
```

### Valores

`<length>`

O valor fixo mínimo da altura. Veja `<length>` (en-US) para possíveis unidades. Valores negativos fazem da declaração inválida.

`<percentage>`

O valor fixo mínimo da altura expressado como uma `<percentage>` (en-US) do conteúdo da altura do bloco. Valores negativos fazem da declaração inválida.

`max-content` 
Experimental

The intrinsic preferred height.

`min-content` 
Experimental

The intrinsic minimum height.

`fill-available` 
Experimental

The containing block height minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, `available`.

`fit-content` 
Experimental

According CSS3 Box, this is a synonym of `min-content`. CSS3 Sizing defines a more complex algorithm, but no browser implements it, even in an experimental way.

Exemplos
--------


```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

Navegadores compatíveis
-----------------------

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

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

* `width`, `height`, `max-height` (en-US)
* The box model (en-US), `min-width` (en-US), `box-sizing`, `height`, `max-height` (en-US)
::after (:after)
================

Em CSS, **`::after`** cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade `content`. É inline por padrão.


```css
/\* Adiciona uma seta após os links \*/
a::after {
  content: "→";
}
```

Sintaxe
-------

Error: could not find syntax for this item

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

Exemplos
--------

### Uso simples

Vamos criar duas classes: uma para parágrafos tediosos e uma para parágrafos excitantes. Podemos então marcar cada parágrafo adicionando um pseudo-elemento ao final dele.


```html
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">
  Contributing to MDN is easy and fun. Just hit the edit button to add new live
  samples, or improve existing samples.
</p>
```



```css
.exciting-text::after {
  content: "<- now this \*is\* exciting!";
  color: green;
}

.boring-text::after {
  content: "<- BORING!";
  color: red;
}
```


#### Visualização

### Exemplos decorativos

Podemos estilizar textos ou imagens na propriedade `content` praticamente de qualquer forma que quisermos.


```html
<span class="ribbon">Observe onde a caixa de laranja está.</span>
```



```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "Observe esta caixa laranja";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```


#### Visualização

### Dicas

O exemplo a seguir mostra o uso do `::after` pseudo-elemento em conjunto com a expressão CSS `attr()` e um atributo data personalizado `data-descr` para criar uma *dica* em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em página separada.


```html
<p>
  Aqui está o exemplo ao vivo do código acima.<br />
  Temos um pouco de
  <span data-descr="collection of words and punctuation">texto</span> aqui com
  algumas
  <span data-descr="small popups which also hide again">dicas</span>.<br />
  Não seja tímido, passe o mouse por cima para dar uma
  <span data-descr="not to be taken literally">olhada</span>.
</p>
```



```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```


#### Visualização

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

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

* `::before`, `content`
mix-blend-mode
==============

Resumo
------

A propriedade **`mix-blend-mode`** descreve como um elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.

|  |  |
| --- | --- |
| Initial value | `normal` |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |
| Creates stacking context | yes |

Sintaxe
-------


```css
/\* Valores para esta propriedade \*/
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/\* Valores globais \*/
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;
```

### Valores

`<blend-mode>`

É uma `<blend-mode>` que descreve qual mesclagem deve ser aplicada. Podem ser descritos vários valores, separados por vírgula.

### Sintaxe formal
```

mix-blend-mode =   
  <blend-mode>  | (en-US)  
  plus-darker   | (en-US)  
  plus-lighter    
  
<blend-mode> =   
  normal       | (en-US)  
  multiply     | (en-US)  
  screen       | (en-US)  
  overlay      | (en-US)  
  darken       | (en-US)  
  lighten      | (en-US)  
  color-dodge  | (en-US)  
  color-burn   | (en-US)  
  hard-light   | (en-US)  
  soft-light   | (en-US)  
  difference   | (en-US)  
  exclusion    | (en-US)  
  hue          | (en-US)  
  saturation   | (en-US)  
  color        | (en-US)  
  luminosity     
  
```

Exemplos
--------


```html
<svg>
  <circle cx="40" cy="40" r="40" fill="red" />
  <circle cx="80" cy="40" r="40" fill="lightgreen" />
  <circle cx="60" cy="80" r="40" fill="blue" />
</svg>
```



```css
circle {
  mix-blend-mode: screen;
}
```

### Resultado

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

| Specification |
| --- |
| Compositing and Blending Level 2 # mix-blend-mode |

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

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

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

* `<blend-mode>`
* `background-blend-mode`
:last-of-type
=============

Sumário
-------

A CSS pseudo-class `:last-of-type` representa o último irmão com o nome de elemento dado na lista de filhos de seu elemento pai.

Syntax
------
```

element:last-of-type { style properties }
```

Exemplo
-------

Para selecionar o último elemento *em* dentro de um elemento `<p>`, você pode usar o seguinte:


```css
p em:last-of-type {
  color: lime;
}
```



```html
<p>
  <em>I'm not lime :(</em>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <strong>I'm also not lime :(</strong>
</p>

<p>
  <em>I'm not lime :(</em>
  <span><em>I am lime!</em></span>
  <strong>I'm not lime :(</strong>
  <em>I'm lime :D</em>
  <span><em>I am also lime!</em> <strike> I'm not lime </strike></span>
  <strong>I'm also not lime :(</strong>
</p>
```


...irá resultar em:

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

| Specification |
| --- |
| Selectors Level 4 # last-of-type-pseudo |

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

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

See also
--------

* `:nth-last-of-type` (en-US)
* `:first-of-type`
* `:nth-of-type`
CSS Box Model
=============

**CSS Box Model (Modelo de Caixa CSS)** é um módulo de CSS que define caixas retangulares, incluindo preenchimento (padding) e margem (margin), que são gerados por elementos e dispostos de acordo com o modelo de formato visual (en-US).

Referência
----------

### Propriedades

#### Propriedades que controlam o fluxo de conteúdo em uma caixa

* `box-decoration-break` (en-US)
* `box-sizing`
* `overflow`
* `overflow-x` (en-US)
* `overflow-y` (en-US)

#### Propriedades que controlam o tamanho de uma caixa

* `height`
* `width`
* `max-height` (en-US)
* `max-width`
* `min-height`
* `min-width` (en-US)

#### Propriedades que controlam as margens de uma caixa

* `margin`
* `margin-bottom`
* `margin-left` (en-US)
* `margin-right` (en-US)
* `margin-top`

#### Propriedades que controlam o preenchimento (padding) de uma caixa

* `padding`
* `padding-bottom` (en-US)
* `padding-left`
* `padding-right` (en-US)
* `padding-top` (en-US)

#### Outras propriedades

* `box-shadow`
* `visibility`
Guias e ferramentas
-------------------

Introdução ao modelo de caixa CSS

Explicações de uma concepção fundamental no CSS, o modelo de caixa: descreve o sentido de margem, preenchimento, tambem como as diferentes áreas da caixa.

Dominando o colapso da margem

Na maioria dos casos, duas margens adjacentes são colapsadas em uma. Este artigo descreve quando isso acontecwe e como controlar isso.

Gerador de sombra de caixa (en-US)

Uma ferramenta interativa que permite criar sombras visualmente e gerar a sintaxe necessária para a propriedade `box-shadow`.

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

| Specification |
| --- |
| CSS Box Model Module Level 3  |
<display-internal>
==================

Alguns modelos de layout, como `table` e `ruby` Alguns modelos de layout, como possuem uma estrutura interna complexa, com várias funções diferentes que seus filhos e descendentes podem preencher. Esta página define os valores de exibição "internos", que só têm significado nesse modo de layout específico.

Sintaxe
-------

Salvo indicação em contrário, o tipo de exibição interno e o tipo de exibição externo de elementos que usam esses valores de exibição são definidos para a palavra-chave fornecida.

`table-row-group`

Esses elementos se comportam como`<tbody>` (en-US) HTML elementos.

`table-header-group`

Esses elementos se comportam como`<thead>` (en-US) HTML elementos.

`table-footer-group`

Esses elementos se comportam como `<tfoot>` HTML elementos.

`table-row`

Esses elementos se comportam como `<tr>` (en-US) HTML elementos.

`table-cell`

Esses elementos se comportam como `<td>` (en-US) HTML elementos.

`table-column-group`

Esses elementos se comportam como`<colgroup>` (en-US) HTML elementos.

`table-column`

Esses elementos se comportam como `<col>` (en-US) HTML elementos.

`table-caption`

Esses elementos se comportam como`<caption>` HTML elementos.

`ruby-base` 
Experimental

Esses elementos se comportam como`<rb>` (en-US) HTML elementos.

`ruby-text` 
Experimental

Esses elementos se comportam como `<rt>` (en-US) HTML elementos.

`ruby-base-container` 
Experimental

Esses elementos se comportam como`<rbc>` HTML elementos gerado como caixas anônimas.

`ruby-text-container` 
Experimental

Esses elementos se comportam como `<rtc>` (en-US) HTML elementos.

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

### Suporte de valores de tabela

`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, and `table-row-group`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

### Suporte de valores de rubi

`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, and `ruby-text-container`

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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

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

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-box>`
    + `<display-legacy>`
:last-child
===========

Resumo
------

A CSS pseudo-classe (en-US) `:last-child` representa qualquer elemento que é o último filho de seu elemento pai.

Sintaxe
-------
```

elemento:last-child { propriedades de estilo }
```

Exemplo
-------

### Conteúdo HTML


```html
<ul>
  <li>Esse item não é afetado pelo estilo.</li>
  <li>Esse também não.</li>
  <li>Esse item é! :)</li>
</ul>
```

### Conteúdo CSS


```css
li:last-child {
  background-color: lime;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

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

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