recursal/MDN huggingface dataset:
:invalid
========

A pseudo-classe CSS **`:invalid`** representa qualquer elemento `<input>` ou `<form>` (en-US) cujo conteúdo não esteja válido (en-US).


```css
/\* Seleciona todos os inputs inválidos \*/
input:invalid {
  background-color: pink;
}
```


Essa pseudo-classe é útil para usuário identificar quais campos foram preenchidos incorretamente.

Sintaxe
-------

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

Esse exemplo apresenta um simples formulário onde a cor verde realça um input válido e a cor vermelha realça um input inválido.

### HTML


```html
<form>
  <label for="url\_input">Adicione uma URL:</label>
  <input type="url" id="url\_input" />
  <br />
  <br />
  <label for="email\_input">Adicione um endereço de email:</label>
  <input type="email" id="email\_input" required />
</form>
```

### CSS


```css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}
```

### Resultado

Notas
-----

### Radio buttons

Se algum radio button de um grupo possuir o atributo `required`, a pseudo-classe `:invalid` é aplicada a todos se nenhum deles for selecionado. (Radio buttons agrupados compartilham o mesmo valor pelo atributo `name`.)

### Gecko defaults

Por padrão, Gecko não aplica o estilo para a pseudo-classe `:invalid`. Entretanto, pode-se aplicar um estilo (um "brilho" vermelho usando a propriedade `box-shadow`) à pseudo-classe `:-moz-ui-invalid` (en-US), que são um conjunto que se aplicam como o `:invalid`.

Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completamente para alterar a aparência dos campos inválidos:


```css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-invalid |
| 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-classes relacionadas com validações: `:required`, `:optional`, `:valid`
* Mozilla pseudo-classes relacionadas: `:-moz-ui-invalid` (en-US), `:-moz-submit-invalid` (en-US)
* Form data validation (en-US)
Regra At
========

Uma **regra at (at-rule)** é uma CSS statement iniciando com um caractere arroba, '`@`' (`U+0040 ARROBA COMERCIAL`), seguido por um indetificador e terminando no primeiro ponto e vírgula', `;`' (`U+003B SEMICOLON`), fora de um bloco, ou no fim do primeiro Bloco CSS.

Existem muitas regras at, criadas por seu identificador, cada um com uma sintaxe diferente:

* `@charset`, definindo o conjunto de caracteres (codificação) usado pela folha de estilos.
* `@import`, informando o motor CSS para incluir uma folha de estilos externa.
* `@namespace` (en-US), informando ao motor CSS que todo o conteúdo deve ser considerado prefixado com um namespace XML.
* Regras at aninhadas, um subconjunto de regras aninhadas que pode ser usado não somente como uma regra de uma folha de estilos, mas também dentro de um grupo de regras condicional:
    + `@media` (en-US), um grupo de regras condicional que é aplicado ao conteúdo caso o dispositivo de exibição cumpra com a condição de mídia definida.
    + `@font-face`, descrevendo o aspecto de uma fonte externa que deve ser baixada. 
    Experimental
    + `@document` (en-US), um grupo de regras condicional que é aplicado ao conteúdo caso o documento cumpra com os critério definidos. 
    Experimental
    + `@supports` (en-US), um grupo de regras condicional que é aplicado caso o navegador cumpra com os critérios definidos. 
    Experimental
Grupos condicionais de regras
-----------------------------

Assim como valores de propriedades, cada regra at possui uma sintaxe diferente; várias delas, entretanto, podem ser agrupadas em uma categoria especial, os **grupos condicionais de regras**. Essas regras compartilham uma sintaxe em comum. Cada uma delas inclui *regras aninhadas*, que são *conjuntos de regras* ou *regras at aninhadas*. Todas elas transmitem um significado semântico em comum: todas indicam uma condição (de um tipo diferente) para que as regras sejam aplicadas.

Grupos condicionais de regras são definidos pelo CSS3 e são:

* `@media` (en-US),
* `@document` (en-US),
* `@supports` (en-US).

Cada uma delas sendo também uma regra aninhada, pode haver uma quantidade indeterminada de aninhamentos.
Valor Especifícado
==================

O **valor especificado** de uma propriedade CSS está definido em uma de três maneiras.

1. If the document's stylesheet has specified a value for the property then it will be used. For example; if the `color` property is set to `green` then the text color of the corresponding element will be green.
2. If the document's stylesheet has not specified a value then it will be inherited form the parent element (if possible). For example; if we have a paragraph (`<p>`) inside a `<div>` and the `<div>` has a CSS `font` property value of "Arial" and the `<p>` doesn't have a `font` property defined then it will inherit the Arial font.
3. If none of the above are available, the initial value for the element as specified by the CSS specification is applied.
Especificações
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

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

* CSS Reference
page-break-before
=================

> 
> **Warning:** Esta propriedade foi substituída pela propriedade `break-before` (en-US).
> 
> 
> 

A propriedade CSS **`page-break-before`** ajusta as "quebras de páginas" *antes* do elemento atual.

Esta propriedade aplica-se para elementos em bloco (block) que geram uma caixa. Não será aplicada em uma `<div>` vazia que não irá gerar uma caixa (box).


```css
/\* Keyword values \*/
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/\* Global values \*/
page-break-before: inherit;
page-break-before: initial;
page-break-before: unset;
```


|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Page break aliases
------------------

A propriedade `page-break-before` agora é uma propriedade legada, substituída por `break-before` (en-US).

Por motivos de compatibilidade, `page-break-before` é tratada pelos navegadores como um alias de `break-before`. Isso garante que sites usando `page-break-before` continuem a funcionar. Um subconjunto de valores deve manter aliases como a seguir:

| page-break-before | break-before |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

Syntax
------

### Values

`auto`

Initial value. Automatic page breaks (neither forced nor forbidden).

`always`

Always force page breaks before the element.

`avoid`

Avoid page breaks before the element.

`left`

Force page breaks before the element so that the next page is formatted as a left page.

`right`

Force page breaks before the element so that the next page is formatted as a right page.

`recto` 
Experimental

If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

`verso` 
Experimental

If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

### Formal syntax
```

page-break-before =   
  auto     | (en-US)  
  always   | (en-US)  
  avoid    | (en-US)  
  left     | (en-US)  
  right    | (en-US)  
  inherit    
  
```

Examples
--------


```css
/\* avoid page break before the div \*/
div.note {
  page-break-before: avoid;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-before |

Browser compatibility
---------------------

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

See also
--------

* `break-before` (en-US), `break-after` (en-US), `break-inside` (en-US)
* `page-break-after` (en-US), `page-break-inside` (en-US)
* `orphans` (en-US), `widows` (en-US)
Herança
=======

Resumo
------

O resumo de cada definição de propriedade do CSS diz se tal propriedade é herdada por padrão ("Inherited": sim) ou é não herdada por padrão ("Inherited": não). Isso controla o que ocorre quando nenhum valor é especificado para uma propriedade em um elemento.

Propriedades herdadas
---------------------

Quando nenhum valor de uma **propriedade herdada** foi especificado em um elemento, o elemento obtém o valor computado desta propriedade em seu elemento pai. Apenas o elemento raiz do documento obtém o valor inicial dado no resumo da propriedade.

Um exemplo típico de uma propriedade herdada é a propriedade `color`. Dadas as seguintes regras de estilo:


```css
p {
  color: green;
}
```


e o markup:


```html
<p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p>
```


As palavras "texto enfatizado" vão aparecer em verde, já que o elemento `em` herdou o valor da propriedade `color` do elemento `p`. Ele *não* obtém o valor inicial da propriedade (o qual é a cor usada pelo elemento raiz quando a página não especifica nenhuma cor).

Propriedades não herdadas
-------------------------

Quando nenhum valor para uma **propriedade não herdada** (algumas vezes chamada de **reset property** em código Mozilla) é especificado em um elemento, o elemento obtém o valor inicial (en-US) desta propriedade (como especificado no resumo da propriedade).

Um exemplo típico de uma propriedade não herdada é a propriedade `border` (en-US). Dadas as seguintes regras de estilo:


```css
p {
  border: medium solid;
}
```


e o markup


```html
<p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p>
```


As palavras "texto enfatizado" não vão ter uma borda (já que o valor inicial de `border-style` (en-US) é `none`).

Notas
-----

A palavra-chave `inherit` (en-US) permite aos autores especificar explicitamente a herança. Ela funciona tanto em propriedades herdadas como não herdadas.

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

* Referência CSS
* `inherit` (en-US)
CSS Positioning
===============

**CSS Positioning** é um módulo do CSS que define como ficam a posição dos elementos relativos e absolutos da página.

Referências
-----------

### CSS Properties

* `bottom` (en-US)
* `clear`
* `display`
* `float`
* `left` (en-US)
* `position`
* `right` (en-US)
* `top` (en-US)
* `visibility`
* `z-index` (en-US)
Roteiro
-------

Entendendo o CSS z-index

Apresenta o conceito de contexto de empilhamento e explica como funciona o atributo z-index, com diversos exemplos.

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3  |
Type selectors
==============

O **seletor de tipo** CSS corresponde aos elementos pelo nome do nó. Em outras palavras, ele seleciona todos os elementos do tipo fornecido em um documento.


```css
/\* Todos os elementos <a> \*/
a {
  color: red;
}
```

Sintaxe
-------
```

element { style properties }
```

Exemplos
--------

### CSS


```css
span {
  background-color: skyblue;
}
```

### HTML


```html
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
```

### Result

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

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

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

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

**CSS Display** É um módulo de CSS que define como a árvore da caixa de formatação CSS é gerada a partir da árvore de elementos do documento e define as propriedades que a controlam.

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

### CSS Propriedades

* `display`
### CSS tipos de dados

* `<display-outside>`
* `<display-inside>`
* `<display-listitem>`
* `<display-box>`
* `<display-internal>`
* `<display-legacy>`
Guias
-----

### CSS Fluxo Layout (`display: block`, `display: inline`)

* Layout de bloco e embutido no fluxo normal (en-US)
* Layout de fluxo e Overflow (en-US)
* Layout de fluxo e modos de gravação (en-US)
* Contextos de formatação explicados (en-US)
* No fluxo e fora do fluxo (en-US)
### `display: flex`

* Conceitos básicos de flexbox
* Alinhando itens em um container Flex
* Relações de controle de itens flexíveis ao longo do eixo principal (en-US)
* Combinações Flexbox entre navegadores (en-US)
* Dominando o agrupamento de itens flexíveis (en-US)
* Pedido de itens flexíveis (en-US)
* Relação do flexbox com outros métodos de layout (en-US)
* Compatibilidade com versões anteriores do Flexbox (en-US)
* Casos de uso típicos do Flexbox (en-US)
### `display: grid`

* Conceitos básicos de layout de grade
* Relação com outros métodos de layout
* Posicionamento baseado em linha (en-US)
* Áreas de modelo de grade (en-US)
* Layout usando linhas de grade nomeadas (en-US)
* Posicionamento automático no layout da grade (en-US)
* Alinhamento de caixa no layout da grade (en-US)
* Grades, valores lógicos e modos de escrita (en-US)
* Layout e acessibilidade da grade CSS (en-US)
* Layout de grade CSS e aprimoramento progressivo (en-US)
* Realizando layouts comuns usando grades (en-US)
Especificações
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
text-decoration-style
=====================

Resumo
------

A propriedade CSS **`text-decoration-style`** CSS define o estilo das linhas especificadas por `text-decoration-line` (en-US). O modelo aplica-se a todas as linhas, não há nenhuma forma de definir estilos diferentes para cada uma das linhas utilizando `text-decoration-line`.

Se a decoração especificada tem um significado semântico específico, como uma linha de line-through o que significa que um texto tenha sido excluído, autores são encorajados a denotar este significado usando uma tag HTML, como `<del>` ou `
`. Como os navegadores podem ser deficientes em alguns casos, o significado semântico não vai desaparecer em tal situação.

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

Syntax
------


```css
/\* Keyword values \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/\* Global values \*/
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
```

### Valores

`solid double dotted dashed wavy`

É uma das seguintes palavras-chave:

| Keyword | Description | Comment |
| --- | --- | --- |
| `solid` | Draws a single line |  |
| `double` | Draws a double line |  |
| `dotted` | Draws a dotted line |  |
| `dashed` | Draws a dashed line |  |
| `wavy` | Draws a wavy line |  |
| `-moz-none` 
Non-standard
 | Do not draw a line | **Do not use** **:** use `text-decoration-line` (en-US)`: none` instead |

`inherit`

É uma palavra-chave indicando a reutilizar o valor calculado sobre o elemento pai.

### Syntax Formal
```

text-decoration-style =   
  solid   | (en-US)  
  double  | (en-US)  
  dotted  | (en-US)  
  dashed  | (en-US)  
  wavy      
  
```

Exemplo
-------


```css
.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}
```



```css
.example {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```



```html
<p class="example">This is how it looks.</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

Browser compatíveis
-------------------

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

O pseudo-elemento CSS **`::selection`** aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.


```css
::selection {
  background-color: cyan;
}
```

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

Apenas certas propriedades podem ser usadas com o `::selection`:

* `color`
* `background-color`
* `cursor`
* `caret-color` (en-US)
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color` (en-US)
* `text-shadow`

> 
> **Warning:** Em particular, `background-image` (en-US) é ignorada.
> 
> 
> 

Sintaxe
-------
```

/* Sintaxe legado do Firefox (até a versão 61) */
::-moz-selection

Error: could not find syntax for this item
```

Exemplo
-------

### HTML


```html
Esse texto tem estilos especiais quando selecionado.
<p>Tente selecionando também o texto nesse parágrafo.</p>
```

### CSS
```

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}
```



```css
/\* Texto selecionado dourado com o fundo vermelho \*/
::selection {
  color: gold;
  background-color: red;
}

/\* Texto selecionado branco com o fundo azul \*/
p::selection {
  color: white;
  background-color: blue;
}
```

### Resultado

Preocupações com acessibilidade
-------------------------------

**Não substitua os estilos de texto selecionados por razões puramente estéticas** — os usuários podem personalizá-los para atender às suas necessidades. Para pessoas com problemas cognitivos ou com menos conhecimento tecnológico, alterações inesperadas nos estilos de seleção podem prejudicar sua compreensão da funcionalidade.

Se substituído, é importante garantir que a **taxa de contraste** entre o texto e as cores de plano de fundo da seleção seja alta o suficiente para que pessoas com condições de baixa visão possam lê-lo.

A taxa de contraste da cor é encontrada comparando a luminosidade do texto selecionado e as cores de fundo do texto selecionado. Para atender às atuais Diretrizes de acessibilidade de conteúdo da Web (WCAG), o conteúdo de texto deve ter uma taxa de contraste de 4.5:1 ou 3:1 para texto maior, como títulos. (WCAG define texto grande entre 18,66 px e 24 px e negrito, ou 24 px ou maior.)

Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do primeiro plano do segundo plano

* WebAIM: Verificador de Constraste de Cor
* MDN Understanding WCAG,1.4: Facilite para os usuários vizualizarem o conteúdo, incluindo a separação do primeiro plano do segundo plano (em inglês). (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Especificações
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

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

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

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

* `pointer-events` - permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.
:read-write
===========

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 pseudo-classe CSS **`:read-write`** representa um elemento (como o `input` ou `textarea`) que é editável pelo usuário.


```css
input:read-write,
textarea:read-write {
  background-color: #bbf;
}

p:read-write {
  background-color: #bbf;
}
```

Sintaxe
-------

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

### Confirmando informações do formulário em controles read-only/read-write

Ao utilizar os controles de formulário `readonly` permite que o usuário verifique e verifique as informações que eles podem ter inserido em um formulário anterior (por exemplo: Detalhes de envio), enquanto ainda pode enviar as informações junto com o resto do formulário. Nós fazemos exatamente isso no exemplo abaixo.

A pseudo-classe `:read-only` *(:somente-leitura)* é usada para remover todo o estilo que faz com que as entradas pareçam campos clicáveis, fazendo com que pareçam outro parágrafo *somente-leitura*. A pseudo-classe `:read-write` *(:leitura-escrita)* por outro lado, é usado para fornecer um estilo mais agradável para a `<textarea>`.


```css
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}
```


Você pode encontrar o código fonte completo em readonly-confirmation.html (disponível em inglês); isso torna assim:

### Estilizar controle não formal de read-write

Este seletor não seleciona apenas `<input>`/`<textarea>` elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um `<p>` elemento com `contenteditable` definido sobre ele.


```html
<p contenteditable>Este parágrafo é editável; é read-write.</p>

<p>Este parágrafo não é editável; é read-only.</p>
```



```css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

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

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

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

* `:read-only` (en-US)
* Atributo HTML `contenteditable`.
-webkit-text-security
=====================

**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.

**`-webkit-text-security`** é uma propriedade CSS não padronizada que ofusca caracteres em um campo `<form>` (en-US) (como `<input>` ou `<textarea>`) substituindo eles com uma forma. Afeta apenas campos que não são `type=password`.

Sintaxe
-------


```css
-webkit-text-security: circle;
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;
```

Exemplo
-------

Tente digitar no campo abaixo. Se o seu navegador suportar essa propriedade, os caracteres deverão ser visualmente substituídos por quadrados.

### HTML


```html
<label for="name">Name:</label> <input type="text" name="name" id="name" />
```

### CSS


```css
input {
  -webkit-text-security: square;
}
```

### Result

Especificação
-------------

*Não faz parte de nenhuma especificação.*

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

Suportado em navegadores baseados no WebKit e Blink.

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

* WebKit CSS extensions (en-US)