recursal/MDN huggingface dataset:
background-blend-mode
=====================

A propriedade CSS **`background-blend-mode`** descreve como as imagens de fundo do elemento devem se misturar entre si e a cor de fundo do elemento.


```css
/\* Um valor \*/
background-blend-mode: normal;

/\* Dois valores, um por fundo \*/
background-blend-mode: darken, luminosity;

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


Os modos de mistura devem ser definidos na mesma ordem que a propriedade CSS `background-image` (en-US). Se os comprimentos da lista dos modos de mistura e das imagens de fundo não forem iguais, ele será repetido e/ou truncado até que os comprimentos correspondam.

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

Sintaxe
-------

### Valores

`<blend-mode>`

É um `<blend-mode>` denotando o modo de mesclagem a ser aplicado. Pode haver vários valores, separados por vírgulas.

### Sintaxe formal
```

background-blend-mode =   
  <mix-blend-mode># (en-US)    
  
```

Exemplos
--------
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```


```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```


```
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

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

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

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`
General sibling selectors
=========================

Resumo
------

O **combinador geral de irmãos** (~) separa dois seletores e corresponde ao segundo elemento somente se ele for precedido pelo primeiro, e ambos compartilham um pai comum.

Sintaxe
-------
```

elemento_anterior ~ elemento_alvo { propriedades de estilo }
```

Exemplo
-------


```css
p ~ span {
  color: red;
}
```



```html
<span>Este não é vermelho.</span>
<p>Aqui temos um parágrafo.</p>
<code>Aqui temos um pouco de código.</code>
<span>E aqui há um span vermelho!</span>
<code>Mais código...</code>
<span>E este também é um span vermelho!</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

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

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

Veja mais
---------

* Adjacent sibling selectors (en-US)
Descendant combinator
=====================

O **combinador descendente** - normalmente representado por um caractere de espaço simples (" ") - combina dois seletores para que os elementos correspondidos pelo segundo seletor sejam selecionados se eles tiverem um elemento ancestral (pai, pai ou mãe, pai ou mãe, etc.) correspondente ao primeiro seletor. Os seletores que utilizam um combinador descendente são chamados de seletores descendentes.


```css
/\* Listar itens descendentes da lista "my-things" \*/
ul.my-things li {
  margin: 2em;
}
```


O combinador descendente é tecnicamente um ou mais caracteres de espaço em branco do CSS - o caractere de espaço e/ou um dos quatro caracteres de controle: retorno de carro (carriage return), Quebra de página ( form feed), nova linha e caracteres de tabulação — entre dois seletores na ausência de outro combinador. Além disso, os caracteres de espaço em branco dos quais o combinador é composto podem conter qualquer número de comentários CSS.

Sintaxe
-------
```

selector1 selector2 {
  /*  declarações de propriedade  */
}
```

Exemplo
-------

### CSS


```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML


```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

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

* Child combinator (en-US)
var()
=====

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

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

* Learn more
* See full compatibility
* Report feedback
A função CSS **`var()`** pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.


```css
var(--header-color, blue);
```


A função `var()` não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)

Sintaxe
-------

O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.
```

<var()> =   
  var( <custom-property-name> , <declaration-value>? (en-US) )    
  
```


**Nota:** A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, `var(--foo, red, blue)` define como argumento alternativo `red, blue`; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.

### Valores

<custom-property-name>

O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.

<declaration-value>

O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.`)`, `]`, ou `}`, ponto e vírgula de primeiro nível, ou sinais de exclamação.

Exemplos
--------


```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```



```css
/\* Argumento alternativo \*/
/\* No estilo de componente: \*/
.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/\* No estilo de grandes aplicações: \*/
.component {
  --text-color: #080; /\* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo \*/
}
```

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

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

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

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

* Utilizando variáveis CSS
color-scheme
============

A Propriedade CSS **`color-scheme`** possibilita que um elemento possa indicar em qual esquema de cores é mais amigável de ser renderizado.

Opções comuns em esquemas de cores de sistemas operacionais são "claro" e "escuro", ou "modo diurno" e "modo noturno". Quando um usuário seleciona um desses esquemas de cores, o sistema operacional faz ajustes na interface do usuário. Isso inclui controles de formulários, barra de scroll, e os valores utilizados no sistema de cores do CSS.

Syntax
------


```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/\* Valores globais \*/
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: unset;
```


O valor da propriedade `color-scheme` precisa ser uma das palavras-chaves abaixo.

### Valores

`normal`

Indica que o elemento não possui nenhum esquema de cores, e deve ser renderizado utilizando o esquema de cores padrão do navegador.

`light`

Indica que o elemento pode ser renderizado utilizando o esquema de cores claro do sistema operacional.

`dark`

Indica que o elemento pode ser renderizado utilizando o esquema de cores escuro do sistema operacional.

Definição formal
----------------

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

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

color-scheme =   
  normal                                       | (en-US)  
  [ (en-US) light | (en-US) dark | (en-US) <custom-ident> (en-US) ] (en-US)+ (en-US) && (en-US) only? (en-US)    
  
```

Exemplos
--------

### Adaptando a esquemas de cores

Para fazer com que toda a página tenha o esquema de cores de preferência do usuário declare `color-scheme` no elemento `:root`.


```css
:root {
  color-scheme: light dark;
}
```

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

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

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

* Aplicando cores em elementos HTML com CSS
* Outras propriedades de cores relacionadas: `color`, `background-color`, `border-color` (en-US), `outline-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), and `column-rule-color` (en-US)
* `background-image` (en-US)
* `print-color-adjust` (en-US)
contain
=======

Baseline 2023
-------------

Newly availableSince February 2023, 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 propriedade **`contain`** permite que um autor indique que elemento e seus conteúdos são, na medida do possível, *independente* do resto da árvore do documento. Isso permite que o navegador recalcule o layout, estilo, pintura, tamanho ou alguma combinação deles para uma área limitada do DOM e não da página inteira.


```css
/\* Sem contenção de layout. \*/
contain: none;

/\* Ativa a contenção para layout, estilo, pintura, e tamanho. \*/
contain: strict;

/\* Ativa a contenção para layout, estilo, e pintura. \*/
contain: content;

/\* Ativa a contenção para um elemento. \*/
contain: size;

/\* Ativa a contenção de layout para um elemento. \*/
contain: layout;

/\* Ativa a contenção de estilo para um elemento. \*/
contain: style;

/\* Ativa a contenção de pintura para um elemento. \*/
contain: paint;
```


Esta propriedade é útil em páginas que contêm um monte de widgets que são todos independentes, uma vez que pode ser usado para impedir que as regras CSS de um widget mude outras coisas na página.

|  |  |
| --- | --- |
| Initial value | `none` |
| Aplica-se a | all elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |

Sintaxe
-------

### Valores

`none`

Indica que o elemento processa como normal, sem contenção aplicada.

strict

Indica que todas as regras de contenção são aplicadas ao elemento. Isso equivale a`contain: size layout style paint`.

content

Indica que todas as regras de contenção, exceto *size* são aplicadas ao elemento. Isso equivale a `contain: layout style paint`.

size

Indica que o elemento pode ser dimensionado sem a necessidade de examinar seus dependentes para alterações de tamanho.

layout

Indica que nada fora do elemento pode afetar seu layout interno e vice-versa.

style

Indica que, para propriedades que podem ter efeitos em mais do que apenas um elemento e seus descendentes, esses efeitos não escape o elemento que contém.

paint

Indica que os descendentes do elemento não são exibidos fora de seus limites. Se um elemento estiver fora da tela ou de outra forma não visível, seus descendentes também são garantidos para não ser visível.

### Sintaxe Formal
```

contain =   
  none                                  | (en-US)  
  strict                                | (en-US)  
  content                               | (en-US)  
  [ (en-US) size || (en-US) layout || (en-US) style || (en-US) paint ] (en-US)    
  
```

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

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |

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

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

O **seletor universal** do CSS (`*`) aplica estilos a elementos de qualquer tipo.


```css
/\* Seleciona todos os elementos \*/
\* {
  color: green;
}
```


A partir do CSS3, o asterisco pode ser combinado com `namespaces` (en-US):

* `ns|*` - aplica a todos os elementos no namespace *ns*
* `*|*` - aplica a todos elementos
* `|*` - aplica a todos os elementos que não tem namespaces declarados
Sintaxe
-------
```

* { propriedades de estilo }
```


O asterisco é opcional para seletores simples. Por exemplo, `*.atencao` e `.atencao` são equivalentes.

Exemplos
--------

### CSS


```css
\* [lang^="pt"] {
  color: green;
}

\*.atencao {
  color: red;
}

\*#conteudoprincipal {
  border: 1px solid blue;
}

.flutuando {
  float: left;
}

/\* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando \*/
.flutuando + \* {
  clear: left;
}
```

### HTML


```html
<p class="atencao">
  <span lang="pt-br">Um span verde</span> em um parágrafo vermelho.
</p>
<p id="conteudoprincipal" lang="pt-pt">
  <span class="atencao">Um span vermelho</span> em um parágrafo verde.
</p>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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

Resumo
------

`A propriedade CSS padding-left` é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.

|  |  |
| --- | --- |
| Initial value | `0` |
| Aplica-se a | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

Syntax
------
```

Syntax formal: 
```
padding-left =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length> (en-US)      | (en-US)  
  <percentage> (en-US)    
  
```


```
```

padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
padding-left: 10%

padding-left: inherit
```

### Valores

`<length>`

Especifica uma largura fixa positiva. Consulte `<length>` (en-US) para obter detalhes.

`<percentage>`

Um percentual em relação a largura do bloco.

Exemplos
--------


```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

Compatibilidade do Navegador
----------------------------

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

A palavra-chave CSS **`initial`** CSS se aplica ao valor inicial (ou padrão) de uma propriedade para um elemento. Este valor inicial é definido pelo navegador. Este valor pode ser aplicado em qualquer propriedade CSS.

Isto inclui também o atalho CSS `all` (en-US), no qual o `initial` pode ser utilizado para restaurar todas as propriedades CSS para o seu estado inicial.

**Nota:** Em propriedades herdadas, O valor inicial pode ser inesperado. Neste caso, considere o uso dos termos {cssxref("inherit")}}, `unset` (en-US), ou `revert` (en-US).

Exemplo
-------

#### HTML


```html
<p>
  <span>Este texto é vermelho.</span>
  <em>Este texto está em sua cor inicial (normalmente preto).</em>
  <span>Este texto está em vermelho de novo :) </span>
</p>
```


#### CSS


```css
p {
  color: red;
}

em {
  color: initial;
}
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # initial |

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

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

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

* Utilize `unset` (en-US) para definir uma propriedade para o seu valor herdado caso haja herança, ou para o seu valor inicial, caso não haja..
* Utilize `revert` (en-US) para redefinir uma propriedade ao valor estabelecido pela folha de estilo user-agent (ou por seus estilos de usuário, se existir algum).
* Utilize `inherit` (en-US) para fazer uma propriedade de elemento a mesma de seu elemento pai.
* A propriedade `all` (en-US) permite que você redefina todas as propriedades para os seus estados initial, inherited, reverted, or unset de uma vez.
:enabled
========

A pseudo-classe CSS **`:enabled`** representa qualquer elemento ativado. Um elemento é ativado se puder ser ativado (selecionado, clicado, digitado etc.) ou aceitar o foco. O elemento também possui um estado desativado, no qual não pode ser ativado nem aceitar foco.


```css
/\* Seleciona qualquer <input> ativado \*/
input:enabled {
  color: blue;
}
```

Sintaxe
-------

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

O exemplo a seguir torna a cor do texto e do botão `<input>` verde quando ativada e cinza quando desativada. Isso ajuda o usuário a entender quais elementos podem ser interagidos..

### HTML


```html
<form action="url\_of\_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>
```

### CSS


```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

See also
--------

* `:disabled`
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
======

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.