Seletores do CSS

O seletor do CSS é um padrão usado para correspondência de elementos no documento HTML. As regras de estilo associadas serão aplicadas aos elementos que correspondem ao padrão do seletor.

O que é um seletor

O seletor é um dos aspectos mais importantes do CSS, pois eles são usados para selecionar elementos na página da web, para que possam ser aplicados estilos. Você pode definir seletores de várias maneiras.

Seletor genérico

Seletor genérico (usado*Asterisco ou asterisco representa) o correspondência com cada elemento individual na página. Se o elemento alvo tiver outras condições, o seletor genérico pode ser omitido. Este seletor é geralmente usado para remover margens e preenchimentos padrão dos elementos, para testes rápidos.

*　{
　　　　margin: 0;
　　　　padding: 0;
　　}

*As regras de estilo dentro do seletor serão aplicadas a todos os elementos no documento.

seletores de tipo de elemento

seletores de tipo de elemento correspondem cada exemplo de elemento na árvore do documento com o nome correspondente do tipo de elemento.

p {
　　　　color: blue;
　　}

O seletor de同级 adjacente pode ser usado para selecionar elementos de同级. A sintaxe do seletor é semelhante a: EAs regras de estilo do seletor serão aplicadas a<p>cada elemento no documento, tornando suas cores azul, independentemente de sua posição na árvore do documento.

seletor de ID

seletores de ID são usados paraindividualouúnicoelementos definem regras de estilo.

A definição de seletor de ID é um sinal de número (#) seguido pelo valor do ID.#seguido pelo valor do ID.

#error {
　　　　color: red;}

Este estilo regra seráidos textos dos elementos cujo atributo é configurado para vermelho aparecem em vermelhoerror.

seletor de classe de classe

seletores de classeclassqualquer elemento HTML com o atributo. Todos os elementos com essa classe serão formatados de acordo com as regras definidas.

usando um ponto (.definidos imediatamente após o valor da classe.

.blue {
　　　　color: blue;
　　　　　　}

As regras de estilo acima serãoclassos textos de todos os elementos no documento cujo atributo é configurado para azul são exibidos em azulbluepara torná-lo mais específico. Por exemplo:

p.blue {
　　　　color: blue;
　　　　}

regras de estilo do seletorp.blueapenas<p>defineclassos elementos cujo atributo é configurado para aparecerem em azulbluee não afetam outros parágrafos.

seletores de descendentes

Quando precisar escolher um elemento que é descendente de outro elemento, você pode usar esses seletores. Por exemplo, se você quiser localizar apenas os pontos de referência contidos em uma lista não ordenada, sem localizar todos os elementos de referência.

ul.menu li a {
　　　　text-decoration: none;
　　　　}
h1　em {
　　　　color: green;
　　　　}

Regras de estilo dentro do seletorul.menu li aul > li<a>contida em um elemento com a classelista não ordenadaque contêm os elementos chamados de elementos ancora.menue não afetam outros links no documento. Da mesma forma,h1 emAs regras de estilo dentro do seletor são aplicáveis apenas a<em>elementos contidos dentro de heading<h1>.

seletores filhos

Os seletores filhos podem ser usados apenas para escolher elementos que são diretamente filhos de certos elementos. Os seletores filhos consistem em dois ou mais seletores, separados por um sinal de maior (>).>separados por pontos e vírgulas. Por exemplo, você pode usar esses seletores para escolher o primeiro nível de elementos de lista em listas aninhadas com vários níveis.

ul > li {
　　　　list-style: square;
　　　　}
ul > li ol {
　　　　list-style: none;
　　　　}

Regras de estilo dentro do seletorul > liul > liApenas para<li>Como<ul>

Os elementos que são diretamente filhos do elemento e não afetam outros elementos da lista.

Seletor de Primo Adjacente1 + E2onde E2é o alvo do seletor.

h1 + O seletor de同级 adjacente pode ser usado para selecionar elementos de同级. A sintaxe do seletor é semelhante a: Ep<p>nos seguintes exemplos de seletores<h1>e<p>apenas<h1>no elemento na árvore do documento compartilha o mesmo pai e<p>ao elemento anterior<h1>Os parágrafos após o título apenas

h1　+　p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task　+　p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

Seletor de Primo Genérico

O seletor de同级 genérico é semelhante ao seletor de同级 adjacente (E1 + E2caracteres separados. O seletor de同级 genérico é composto por dois seletores simples, que são compostos pelo sinal de interrogação (〜caracteres separados. Pode ser escrito assim: E1〜E2onde E2é o alvo do seletor.

Os seletores no exemplo a seguirh1 ~ pserá selecionado<p>antes do elemento<h1>Todos os elementos, onde todos os elementos compartilham o mesmo pai na árvore do documento.

h1　~ p {
　　　　color: blue;
　　　　font-size:　18px;
　　　　}
ul.task ~ p {
　　　　color: #f0f;
　　　　text-indent:　30px;
　　　　}

Existem mais seletores, como seletores de atributo, pseudo-classes, pseudo-elementos. Vamos discutir esses seletores nos próximos capítulos.

Seletores de Agrupamento

Seletores múltiplos em uma tabela de estilo geralmente compartilham as mesmas declarações de regras de estilo. Você pode agrupá-los em uma lista separada por vírgula para minimizar o código na tabela de estilo. Também pode evitar que você repita as mesmas regras de estilo várias vezes.

h1　{
　　　　font-size:　36px;
　　　　font-weight: normal;
　　　}
h2　{
　　　　font-size:　28px;
　　　　font-weight: normal;
　　　}
h3　{
　　　　font-size:　22px;
　　　　font-weight: normal;
　　　}

Como pode ser visto no exemplo acima, as mesmas regras de estilofont-weight: normal;é compartilhado por seleçãoh1,h2eh3Portanto, pode ser dividido em uma lista separada por vírgula, conforme mostrado a seguir:

h1, normal;2, normal;3　{font-weight: normal;}
h1　{font-size:　36px;}
h2　{font-size:　28px;}
h3　{font-size:　22px;}