<p>Vira e mexe eu ainda tenho que buscar nas minhas anotações de blocos de nota sobre alguma coisas de CSS.</p>
<p>Então, hoje começa a brincadeira de escrever posts. Sem mais, bora lá!</p>
<h2 id="seletor-universal"><a href="#seletor-universal" class="anchor">Seletor Universal</a></h2>
<p>Meio obvio né, nem precisa de muita explicação, esse cara seleciona tudo.</p>
<pre><code class="language-css">* {
  background: black;
}
</code></pre>
<h2 id="seletor-de-elemento"><a href="#seletor-de-elemento" class="anchor"><code>Seletor de Elemento</code></a></h2>
<p>Seleciona elementos HTML, body, input, h1, a, p e etc..</p>
<pre><code class="language-css">body {
  background: black;
}
</code></pre>
<h2 id="seletor-de-classe"><a href="#seletor-de-classe" class="anchor">Seletor de Classe</a></h2>
<p>Vc quer explicação? Sério mesmo?!</p>
<pre><code class="language-css">.fundo-preto {
  background: black;
}
</code></pre>
<h2 id="seletor-por-id"><a href="#seletor-por-id" class="anchor">Seletor por ID</a></h2>
<p>Seleciona o ID que vc colocar no elemento.</p>
<pre><code class="language-css">#nome {
  background: black;
}
</code></pre>
<h2 id="seletor-por-atributo"><a href="#seletor-por-atributo" class="anchor">Seletor por Atributo</a></h2>
<p>É possível selecionar por atributo, veja alguns exemplos:</p>
<pre><code class="language-css">[type="text"] {
  background: black;
}

a[href="http://site.com"] {
  color: green;
}

input[type="radio"]:checked {
 border: 1px solid red;
}
</code></pre>
<h2 id="seletor-de-pseudos"><a href="#seletor-de-pseudos" class="anchor">Seletor de Pseudos</a></h2>
<p>Seleciona as pseudo classes dos elementos.</p>
<pre><code class="language-css">a:hover {
  color: red;
}

a:visited {
  color: green;
}

input:checked {
  border: 1px solid blue;
}
</code></pre>
<p>Vou adicionando mais coisas aos poucos.</p>


Universal, Elemento, Classe, ID, Atributo, Pseudo elemento

Seletores

## Combinador Descendente

Seleciona todos os elementos input que são filhos de um form

```css
form input {
  color: blue;
}
```



## Combinador Filho Direto / Descendente Direto

Seleciona o input somente se ele for um filho de form, não funciona para netos ou outros.

```css
form > input {
  color: blue;
}
```



## Combinador Irmão Adjacente

Seleciona o primeiro irmão encontrado de form, nesse caso somente a primeira div encontrada logo apos form será selecionada

```css
form + div {
  color: blue;
}
```



## Combinador Irmão Geral

Todos os irmão de form, ou seja, todas as divs que venham depois de form.

```css
form ~ div {
  color: blue;
}
```

Bruno ArdelSoftware Engineer

Seletores

Universal, Elemento, Classe, ID, Atributo, Pseudo elemento

Seletor Universal

`Seletor de Elemento`

Seletor de Classe

Seletor por ID

Seletor por Atributo

Seletor de Pseudos