CSS fornece várias maneiras de modificar a aparência de um elemento. Os seletores CSS são um deles, os seletores nos permitem atingir um elemento HTML e especificar um estilo de nossa escolha em qualquer elemento HTML.

No CSS, existem cinco categorias de seletores i.e. simples, combinador, pseudo-classe, pseudo-elemento e seletor de atributos. Este artigo apresenta uma visão geral detalhada de um dos seletores simples i.e. Seletor de classe e estará discutindo as seguintes terminologias relacionadas ao seletor de classe:

• O que é um seletor de classe
• Sintaxe básica do seletor de classe
• Como usar o seletor de classe
• Como usar o seletor de classe para alguns elementos HTML específicos

Vamos começar esta discussão com a definição básica de seletor de classe:

Seletor de classe em CSS

Um seletor de classe tem como alvo o elemento (s) com (s) nome (s) de classe (s) específico (s). A sintaxe a seguir fornecerá mais clareza sobre o seletor de classe.

Sintaxe

A sintaxe básica começa com um ponto “.”Seguido pelo nome da classe que representa que é um seletor de classe.

Na figura acima “."Mostra que é um seletor de classe CSS," Style "representa o nome da classe.

Como usar o seletor de classe CSS

O seletor de classe CSS pode ser usado para definir o estilo de alguns elementos HTML específicos.

Exemplo

Vamos dar uma olhada no código abaixo, ele utiliza o seletor de classe para estilizar alguns elementos HTML específicos.

Seletor de classe CSS

Primeiro parágrafo

Segundo parágrafo

O código acima utiliza dois seletores de classe. O

e primeiro

elemento usa a mesma classe para que o mesmo estilo seja implementado, enquanto o segundo

O elemento será estilizado de maneira diferente:

Como usar o seletor de classe CSS para elementos HTML específicos

Podemos usar o seletor de classe CSS para afetar elementos HTML específicos. Para esse fim, precisamos especificar o nome do elemento antes do ponto “.”, Como mostrado na figura a seguir:

A figura acima descreve que selecione todos os

elementos com o nome da classe "estilo" e defina a cor de fundo como azul.

Exemplo

Neste exemplo, a classe Style1 é especificada para

e

elementos. No entanto, apenas

Elementos com o atributo de classe "Style1" podem acessar as propriedades de estilo do estilo1 e o

elemento permanecerá sem si.

Seletor de classe CSS

Primeiro parágrafo

Segundo parágrafo

Saída

Como implementar vários estilos no elemento HTML

Como um elemento HTML pode ter vários nomes de classe em seu atributo de classe para que possamos aplicar um estilo diferente com base nos nomes de classe.

Exemplo

No código abaixo, o primeiro parágrafo implementará as propriedades de ambas as classes de estilo.

Seletor de classe CSS

Primeiro parágrafo

Segundo parágrafo

A parte do código acima gerará a seguinte saída:

A saída verifica que o primeiro parágrafo utiliza as propriedades das duas classes 'Style' e 'Style1'.

Conclusão

Um seletor de classe seleciona o elemento HTML para estilo no CSS usando seu nome de classe e começa com um ponto “.”Seguido pelo nome da classe. Esta redação apresenta uma visão geral abrangente e conceito central de seletores de classe CSS, como usar seletores de classe, como usar um seletor de classe para alguns elementos HTML específicos com a ajuda de exemplos.