Seletores CSS

CSS (sigla de folha de estilo em cascata) oferece alguns padrões que têm como alvo elementos HTML e implementam algum estilo de nossa escolha sobre eles conhecidos como Seletores CSS. Esses seletores encontram os elementos HTML com base em id, classe, tipo, etc.

Você está se perguntando como os seletores CSS funcionam? Sem problemas! Este artigo demonstrará um entendimento detalhado dos seletores de CSS com exemplos. Vamos começar com a sintaxe primeiro:

Sintaxe

A sintaxe para escrever um seletor de CSS é mostrado no trecho abaixo do dito:

Aqui "P" é o seletor que converterá a cor do parágrafo em verde.

Tipos de seletores CSS

O CSS oferece vários tipos de seletores que cada tipo possui diferentes funcionalidades. Este artigo abordará os seguintes tipos:

• Seletor de elementos
• seletor de classe
• seletor de identificação
• seletor de agrupamento
• seletor universal

Seletor de elementos

No CSS, o Seletor de elementos é usado para atingir os elementos HTML de acordo com o nome deles.

Por exemplo, o código a seguir implementará a cor do fundo preto com a cor do texto verde para todos os parágrafos usando o seletor de elementos:

Seletores

Desenvolvimento de front -end

Desenvolvimento de back -end

A saída abaixo do ritmo demonstrará o funcionamento do seletor de elementos CSS:

Seletor de classe

O seletor de classe CSS é usado para atingir os elementos HTML com nome de classe específico. A sintaxe do seletor de classe inclui um período (.) seguido pelo nome da classe.

.ClassName CSS-Property: Value

Na sintaxe acima, “ClassName” é um seletor de classe.

Vamos considerar um exemplo que direcionará o cabeçalho e os elementos do parágrafo usando o seletor de classe, como mostrado no código abaixo:

Seletores

Desenvolvimento de front -end

Desenvolvimento de back -end

Neste exemplo “.estilo ”é seletor de classe que especifica algumas propriedades. Na seção corporal

, e ambos

Os elementos têm o nome da classe "estilo".

O trecho abaixo mostrará a saída do snippet de código acima:

seletor de identificação

No CSS, o seletor de identificação tem como alvo os elementos HTML com base no atributo de identificação. O sinal de hash (#) seguido pelo ID do elemento é usado para o seletor de identificação.

Vamos considerar um exemplo que implementará o estilo especificado no elemento html com id = "estilo", como mostrado abaixo:

Seletores

Desenvolvimento de front -end

Desenvolvimento de back -end

O seletor de identificação implementado no

elemento fornecerá a seguinte saída:

Agora, você deve estar pensando qual é a diferença entre o seletor de identificação e o seletor de classe?

O ID é um identificador único, o que significa que, uma vez que usamos o ID para um elemento, o mesmo ID não pode ser usado em outro lugar dentro do mesmo documento. Se usarmos o mesmo ID duas vezes em um documento, o CSS aplicará o estilo ao mais recente. Enquanto as aulas são ótimos classificadores, eles não são de natureza única.

Seletor de agrupamento

O seletor de agrupamento tem como alvo vários elementos com o mesmo estilo. O seletor de agrupamento utilizado '', entre vários seletores.

Vamos considerar um exemplo que implementará o mesmo estilo para os vários elementos, como mostrado no seguinte snippet:

Seletores

Desenvolvimento de front -end

Desenvolvimento de back -end

Este é um rodapé

A saída a seguir verificará se o seletor de agrupamento aplicou o mesmo estilo para

e elementos:

Seletor universal

O seletor universal implementa o estilo de todos os elementos do documento. Um sinal "*" é usado para implementar o seletor universal. Por exemplo, o código a seguir aplicará o estilo fornecido em todos os elementos HTML:

Seletores

Desenvolvimento de front -end

Desenvolvimento de back -end

Este é um rodapé

O código acima implementará o documento inteiro e, como resultado, obteremos a seguinte saída:

Conclusão

Seletores CSS encontram/segmentam os elementos HTML e implementam algumas propriedades de estilo. Existem vários tipos de seletores de CSS, este artigo cobriu alguns deles, como seletor de elementos e seletor de classe com base no nome do elemento e no nome da classe do elemento, respectivamente. Cada tipo executa funcionalidades diferentes, como o seletor de identificação, implementa alguma ação baseada no ID do elemento, agrupando seletor de seletor os múltiplos elementos, o seletor universal afeta todo o documento e assim por diante.