Introdução aos tipos de seletores CSS
Tipos de seletores CSS são usados para escolher o conteúdo que queremos estilizar. Ajuda na seleção de elementos com base em sua classe, ID, tipo, etc. Um seletor de CSS é um componente do conjunto de regras do CSS.
Tipos de seletores CSS
Existem 5 variedades de seletores CSS disponíveis para nós. Veremos os seguintes importantes seletores de CSS:
- Seletor universal de CSS.
- Seletor de elemento CSS.
- Seletor de identificação de CSS.
- Seletor de classe CSS.
- Seletor de atributos CSS.
1. Seletor Universal de CSS
Em uma página HTML, o conteúdo depende das tags HTML. Um par de tags define um elemento específico da página da web. O seletor universal CSS seleciona todos os elementos em uma página da web.
Exemplo:
* (
color: blue;
font-size: 21px;
)
Essas duas linhas de código entre colchetes afetarão todos os elementos presentes na página HTML. Declaramos um seletor universal com a ajuda de um asterisco no início da chave. O Seletor Universal pode ser usado junto com os outros seletores em combinação.
2. Seletor de elemento CSS
O seletor de elementos CSS também é conhecido como seletor de tipos. O Seletor de elementos em CSS tenta corresponder aos elementos HTML com o mesmo nome. Portanto, um seletor de
- corresponde a todos
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- CSS Interview Questions
- SASS vs SCSS
- Perguntas da entrevista SASS
- Exemplos de lista ordenada HTML
- elementos, ou seja, todas as listas não ordenadas nessa página HTML.
Vejamos um exemplo para o seletor de elemento.
ul (
border: solid 1px #ccc;
)
Para entender isso melhor, vejamos um exemplo de código HTML para aplicar o código CSS que escrevemos acima.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Texto de demonstração
Neste exemplo, encontraremos principalmente três elementos, a saber, o
- elemento, a tag e outra
- elemento. Como nosso código CSS se aplica ao
- especificamente, as alterações na fronteira serão feitas apenas para o nosso
- tags, e não para as tags. Geralmente, essas alterações não se aplicam ao conteúdo do
- tags também, mas em alguns cenários, os estilos podem se aplicar aos elementos internos.
3. Seletor de identificação de CSS
O seletor de ID do CSS ajuda o desenvolvedor a corresponder o ID criado pelo desenvolvedor ao seu conteúdo de estilo. O Seletor de ID é usado com a ajuda do sinal de hash (#) antes do nome do ID declarado pelo desenvolvedor. O seletor de ID corresponde a todos os elementos HTML com um atributo de ID com o valor igual ao do seletor, sem o sinal de hash.
Aqui está um exemplo:
#box (
width: 90px;
margin: 10px;
)
Este código CSS pode ser usado para corresponder ao elemento que possui o id 'box', como na frase a seguir.
Aqui, a tag é apenas um exemplo. Podemos escrever o atributo ID para qualquer tag HTML. O Seletor de ID corresponde ao atributo de ID dentro do elemento e procura seu estilo. No nosso exemplo, o estilo se aplica desde que qualquer elemento contenha o atributo de ID 'caixa'.
O valor do ID que está sendo usado deve ser exclusivo. Se o mesmo ID for usado para dois ou mais elementos, o código é tecnicamente inválido, mas o estilo do elemento ainda será aplicado, portanto, evitar o mesmo ID.
Ter que usar um ID diferente sempre para cada página HTML é bastante rígido. Além de enfrentar problemas de rigidez, os seletores de ID no CSS também enfrentam a questão da especificidade.
4. Seletor de Classes CSS
O seletor de classe CSS é um dos seletores mais úteis de todos os seletores. É declarado usando um ponto seguido pelo nome da classe. Esse nome de classe é definido pelo codificador, como é o caso do seletor de ID. O seletor de classe procura todos os elementos com um valor de atributo com o mesmo nome que o nome da classe, sem o ponto.
Exemplo:
.square (
margin: 20px;
width: 20px;
)
Esse código CSS pode ser usado para corresponder ao elemento que possui a classe 'square, como na sentença a seguir.
Esse estilo também se aplica a todos os outros elementos HTML que possuem um valor de atributo para a classe como 'quadrado'. Um elemento com o mesmo valor de atributo de classe nos ajuda a reutilizar os estilos e evita repetições desnecessárias. Além disso, o Seletor de classe é benéfico, pois permite adicionar várias classes a um elemento específico. Podemos adicionar mais de uma classe ao atributo separando cada classe com espaço.
Exemplo:
Aqui quadrado, negrito e forma são três tipos diferentes de classes.
5. Seletor de Atributos CSS
O seletor de atributos CSS estiliza o conteúdo de acordo com o atributo e o valor do atributo mencionado entre colchetes. Nenhum espaço pode estar presente antes do colchete de abertura.
input(type="text") (
background-color: #fff;
width: 100px;
)
Este código CSS seria uma correspondência para o seguinte elemento HTML.
Da mesma forma, se o valor do atributo 'tipo' for alterado, o seletor de Atributos não corresponderá a ele. Por exemplo, o seletor não corresponderia ao atributo se o valor de 'tipo' fosse alterado de 'texto' para 'enviar'. Se o seletor de atributo for declarado apenas com o atributo e sem valor, ele corresponderá a todos os elementos HTML com o atributo 'type', independentemente de o valor ser 'text' ou 'submit'.
Exemplo:
input(type) (
background-color: #fff;
width: 100px;
)
Também podemos usar seletores de atributos sem especificação de um valor fora dos colchetes. Isso nos ajudará a direcionar apenas o atributo, independentemente do elemento. Em nosso exemplo, ele será direcionado com base no atributo 'type', independentemente do elemento 'input'. Os seletores de CSS nos ajudam a simplificar nosso código e nos permitem utilizar e reutilizar o mesmo código CSS para vários elementos HTML. Eles nos ajudam a modelar segmentos e partes específicos de nossa página da web. Eles nos oferecem a opção de estilizar uniformemente elementos semelhantes em nossa página da web. Os seletores de CSS são, portanto, uma parte importante da curva de aprendizado do CSS.
Artigos recomendados
Este foi um guia para tipos de seletores de CSS. Aqui discutimos os diferentes tipos de seletores CSS com exemplo. Você também pode consultar nossos outros artigos sugeridos para saber mais -