Como selecionar um elemento HTML no CSS

Para melhorar a aparência das páginas da web escritas em HTML ou XML, os programadores da Web usam regras CSS para embelezar suas páginas da web. A sintaxe do CSS fornece uma ampla variedade de Seletores Para selecionar elementos HTML. A seleção de elementos HTML usando seletores CSS permitirá que o programador aprimore seus sites. Neste tutorial, vamos aprender vários seletores de CSS com os quais podemos selecionar elementos html.

Seletores CSS

Um seletor é uma regra básica de CSS. Esses seletores informam o navegador para selecionar elementos HTML específicos e estilizá -los da maneira especificada.

Sintaxe:

H2
Alinhamento de texto: centro;
Cor: Aqua;

P
tamanho de fonte: 12px;
cor azul;

Como já mencionado, existem vários seletores fornecidos pelo CSS que são.

1. Seletores básicos
2. Seletor de atributo
3. Seletores de combinadores
4. Seletor de tipo
5. Seletores de pseudo-classe
6. Seletores de pseudo-elementos

Vamos aprender sobre eles em detalhes.

Seletores básicos

Esta categoria de seletores consiste em alguns seletores de CSS primários.

Seletor de elementos

Um seletor de elemento é usado para selecionar elementos HTML com base. Por exemplo,

H2
Alinhamento de texto: centro;
cor azul;

No exemplo acima, o seletor de elemento seleciona

elemento e define sua cor para azul e alinha o texto no centro da página/contêiner.

Seletor de identificação

Como todo elemento pode ter um ID exclusivo, para que este seletor se alvo de ID para selecionar o elemento e atribuir valores às suas propriedades. Para selecionar um elemento HTML usando seu ID, usamos um símbolo de hash (#) seguido de id.

No exemplo a seguir, o seletor de identificação seleciona um elemento com id = "head1" e ajusta seu alinhamento à esquerda enquanto cor para aqua.

#Head1
Alinhamento de texto: esquerda;
Cor: Aqua;

Seletor de classe

Seletor de classe estiliza um elemento HTML com base em um atributo de classe específico. Para selecionar um elemento HTML usando seu nome de classe, usamos um ponto seguido de um nome de classe.

.principal
Alinhamento de texto: esquerda;
Margin-top: 3px;
Margin-Bottom: 3px;

Seletor universal

Para selecionar todos os elementos de uma página HTML, utilizamos um seletor universal. É representado por um sinal de asterisco (*).

*
cor bege;
Alinhamento de texto: justifique;

Seletor de agrupamento

Com o objetivo de selecionar todos os elementos que você deseja selecionar de maneira semelhante, use o seletor de agrupamento.

H1, H2, P
cor preta;
Alinhamento de texto: centro;
Fonte-família: 'Times New Roman', Times, Serif;

Seletor de atributo

Um seletor de atributos utiliza nomes de atributos específicos para selecionar elementos HTML.

um alvo]
cor verde;
Alinhamento de texto: centro;

No exemplo acima, o seletor IIS selecionando todos os elementos que têm um alvo de atributo. O seletor de atributos é dividido em diferentes categorias. A tabela abaixo os explica.

Seletores de atributos	Descrição	Exemplo
[atributo = "value"]	Ele seleciona elementos com um atributo e valor específicos.	div [lang = fr] background-color = vermelho;
[atributo ~ = "value"]	Ele seleciona elementos que têm uma palavra específica em seu valor de atributo.	img [título ~ = "flor"] borda: 2px azul sólido
[atributo | = “valor”]	Ele seleciona um elemento com um atributo específico cujo valor pode ser precisamente o valor específico ou o valor específico que vem após um hífen (-).	p [lang | = en] font-size: 12px;
[atribution^= "value"]	Ele seleciona elementos com atributos com valores começando com um valor específico.	a [classe^= "top"] Background-Color: Pink;
[Atributo $ = "Valor"]	Ele seleciona elementos com atributos com um valor final específico.	img [src $ = cachorro.jpg] borda: 2px; amarelo sólido
[atributo*= "valor"]	Ele seleciona um elemento com valor de atributo com um valor específico.	a [href*= "Exemplo"] ​​color: blue;

Seletores de combinadores

Para combinar um ou mais tipos de seletores básicos de CSS, usamos um seletor de combinador. Existem quatro tipos de seletores de combinadores que são;

Seletores de combinadores	Descrição	Exemplo
Descendente	Ele seleciona elementos que são descendentes de um elemento específico.	div p cor azul;
Criança	Ele seleciona os elementos que são os primeiros filhos de um determinado elemento.	div> p cor azul;
Irmão adjacente	Ele seleciona um elemento que vem imediatamente após outro elemento específico.	div + p cor azul;
Irmão geral	Ele seleciona todos os elementos que são os irmãos próximos de um determinado elemento.	div ~ p cor azul;

Seletores de tipo

Os seletores de tipo são usados ​​no CSS quando você deseja selecionar todos os elementos de um tipo específico em um documento. Por exemplo.

período
Background-Color: Blue;

Seletores de pseudo-classe

Os seletores de pseudo-classe são usados ​​quando você deseja descrever um estado específico de um elemento. Diferentes pseudo-classes são.

Pseudo-classes	Descrição	Exemplo
:link	Ele estiliza um link que ainda não foi visitado.	A: link color: aqua;
:visitado	Ele estiliza um link que já foi visitado.	A: Visitado color: Green;
:flutuar	Ele estiliza um elemento quando o mouse paira nele.	A: Hover Color: Pink
: Acitve	Ele estiliza um link ativo.	A: ativo color: azul;
:foco	É usado para estilizar elementos com foco.	P: Foco Background-Color: Purple;
:primeiro filho	É usado para estilizar o primeiro filho de um elemento específico.	P: Primeiro filho Color: Blue;
: Último filho	Corresponde a todos os elementos que são o último filho de seus pais.	P: Último filho font-size: 6px;
: Lang	Especifica a linguagem de um determinado elemento.	P: Lang (Eng) cita: “-” “-”;

Seletores de pseudo-elementos

Para estilizar algumas partes específicas de um elemento pseudo-elementos. Os pseudo-elementos são os seguintes;

Pseudo-elementos	Descrição	Exemplo
::primeira linha	É usado para estilizar a primeira linha de um texto.	P :: Primeira linha font-size: 6px: cor: vermelho;
::primeira carta	É usado para estilizar a primeira letra de um texto.	P :: Primeira letra Fonte-peso: 7px; cor azul;
::antes	Adiciona conteúdo antes de um elemento.	P :: antes img = “Flor.jpg ”;
::depois	Adiciona conteúdo após um elemento.	P :: depois img = “Flor.jpg ”;
::marcador	É usado para estilizar marcadores de uma lista.	:: marcador cor: vermelho; Peso da fonte: 2px;
::seleção	É usado para estilizar parte selecionada de um elemento.	:: Seleção Background-Color: Blue; Size da fonte: 2px;

Conclusão

Para selecionar um elemento HTML no CSS, o CSS fornece seletores para informar o navegador para selecionar elementos HTML específicos e estilizá -los da maneira especificada. CSS fornece inúmeros seletores. Aqui, damos uma lista de alguns: seletores básicos, seletor de atributos, seletor de tipo, seletores de combinadores, seletores de pseudo-classe, seletores de pseudo-elementos. Neste tutorial, exploramos várias categorias de seletores de CSS e como usá -los.