Seletores
- #CSS
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 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 title="gesla">cor azul</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 href="http//dio.teste.css.trilha.com">cor azyk</a>
<a href="http//dio.css.trilha.teste.com">cor azul</a>
<a>asdfasdf</a>
<a href="http//dio.css.teste.trilha.com">cor azul</a>
<a title="iru">dddddd</a
```
