Seletores

Relevem casos os códigos HTML não funcionem de prima. Deixei umas tags abertas.

Seletor de tags

seletor indica em qual elemento iremos aplicar nosso estilo css.

O seletor de tag/tipo se refere a tag usado no elemento HTML, ou seja, escrevendo a tag do HTML na hora de criar a regra css ela será estilizada. Sintaxa

```

<style>

h1{ // aqui está o seletor de tag

font-size:34px;

color: blue;

}

</style>

...

<body

<h1>Olá Mundo!</h1>

</body>

```

LEMBRANDO QUE, SE VOCÊ DEFINIR UMA REGRA CSS PARA UMA TAG ESSA REGRA SE APLICARÁ A TODAS AS TAGS EXISTENTES NO SEU HTML (ISSO SE VOCÊ NÃO DEFINIR O CAMINHO DA TAG, ABORDADO NOS [[Combinadores]])

Seletores de ID

Só pra relembrar do HTML, o ID é uma identificador único, só pode existir um dele no HTML. Para referenciar um ID no CSS e usá-lo como identificador numa regra css basta colocar : `#nomeDoId`

Ex:

```

<style>

#title{ // aqui está o seletor de tag

font-size:34px;

color: blue;

}

</style>

...

<body

<h1 id="title">Olá Mundo!</h1>

</body>

```

Seletor de classe

Assim como o ID, a classe é um identificador que usamos para especificar elementos específicos no HTML(`<h1 class="nomeDaClasse>`). Porém, diferente do ID, a classe pode ser especificada para mais de um elemento HTML, pois seu objetivo é agrupar um grupo de elementos. Para referenciar uma classe temos que fazer assim no css: `.nomeDaClasse{}`Ex;

```

<style>

.title{ // aqui está o seletor de tag

font-size:34px;

color: blue;

}

</style>

...

<body

<h1 class="title">Olá Mundo!</h1>

<h1 class="title">Estou revendo o assunto de seletores CSS</h1>

</body>

```

Seletor Universal

Esse seletor tem a capacidade de referenciar TODOS os elementos do seu HTM e construir uma regra css com ele, ele é referenciado dessa maneira: `*`:.Ex:

```

<style>

*{ // aqui está o seletor de tag

font-size:34px;

color: blue;

}

</style>

...

<body

<h1 class="title">Olá Mundo!</h1>

<h1 class="title">Estou revendo o assunto de seletores CSS</h1>

<p>Esse texto está, assim como os títulos, está com tamanho de 34px e cor azul</p>

</body>

```

Seletor de Atributo

Esse tipo de seletor serve para selecionar um elemento que contém um atributo em específico.

para isso basta fazer desse jeito aqui `tag[atributo]` se a tag não for especificada ele irá aplicar o estilo para todos os elementos que possuem o atributo referido.

Também podemos, para filtrar mais ainda as coisas, adicionar o valor do atributo, tal como `tag[atributo="valor"]`. Ex:

```

<style>

a[title="teste"]{

color:red;

}

a[title="diferente"]{

color:verde;

}

</style>

...

<body

<a title="teste">cor vermelha</a>

<a>asdfasdf</a>

<a title="diferente">cor verde </a>

<a title="iru">dddddd</a>

</body>

```

Também podemos procurar uma palavra em específico dentro do atributo mudando o sinal de igual para `~=`. Veja o exemplo abaixo:

```

<style>

a[title~="teste"]{

color:red;

}

</style>

...

<body

<a title="teste cor lado">cor vermelha</a>

<a title=" lado cor teste">cor vermelha</a>

<a>asdfasdf</a>

<a title="diferente teste lado">cor vermelha </a>

<a title="iru">dddddd</a>

</body>

```

Além desse também podemos trabalhar com outra sintaxe que é usando o `|=`.

Ele vai procurar o valor do atributo especifcado e, ele só vai se referenciar o valor do atributo se ele estiver seguido de hífen.Ex:

```

<style>

a[title|="teste"]{

color:red;

}

</style>

...

<body

<a title="teste-cor lado">cor vermelha</a>

<a title=" lado cor-teste">cor nenhuma</a>

<a>asdfasdf</a>

<a title="diferente-teste lado">cor nenhuma</a>

<a title="iru">dddddd</a>

</body>

```

Ademais, podemos referenciar também por prefixo(`^=`) e sufixo(`$=` )do valor de um atributo. Ex:

```

<style>

a[title^="tes"]{

color:red;

}

a[title$="la"]{

color:blue;

}

a[title^="la"]{

color:green;

}

</style>

...

<body

<a title="teste">cor vermelha</a>

<a>asdfasdf</a>

<a title="lado">cor verde</a>

<a title="iru">dddddd</a>

</body>

```

E para finalizar, temos o seletor de tudo, ele vai procurar o valor do atributo em qualquer canto do mundo, início, meio ou fim, ele vai achar. Para usarmos precisamos apenas mudar o sinal de atributição para `*=`. Ex:

```

<style>

a[href*="todos"]{

color:red;

}

</style>

...

<body>

<a>asdfasdf</a>

<a title="iru">dddddd</a

```