Texto de: Letícia Garcez
Introdução
Muitas pessoas sabem que o CSS é uma tecnologia indispensável no desenvolvimento web, mas mesmo assim acabam não dando a devida atenção para essa tecnologia, por isso, neste artigo falaremos sobre os seletores básicos do CSS.
O que são seletores?
Podemos entender seletores como uma regra que vai definir em quais elementos HTML o estilo especificado será aplicado. Seletores podem representar diversas características de um elemento HTML, como uma tag, um id, uma classe ou um atributo, e podem ser combinados para aumentar ainda mais a especificação de onde aquela formatação deve ser aplicada.
Seletor de tag
O seletor de tag é o seletor mais simples do CSS, e para defini-lo basta colocar o nome da tag onde você deseja aplicar a formatação antes da definição das regras de formatação, como no exemplo abaixo.
div {
background-color:red;
}
Isso aplicará a formatação à todas as tags div que existirem no seu documento HTML.
Seletor de id
Em uma tag HTML, é possível especificar um identificador, chamado de id. Uma tag pode ter apenas um id, e este id não deve se repetir no resto do documento, o que faz com que a utilização de um seletor por id seja muito útil caso você queira aplicar uma formatação a um único elemento.
Os ids no CSS são identificados com um #, como em #nome-do-id. Veja um exemplo abaixo.
#conteudo {
background-color:red;
}
Esse seletor será aplicado à tag que possui o id conteudo, não importando qual seja esse elemento.
Seletor de classe
Classes, assim como ids, também são definidas em tags HTML. Porém, enquanto um id deve ser único e só deve ser aplicado a um elemento, uma classe pode ser aplicada a vários elementos, e um elemento pode possuir várias classes.
As classes no CSS são identificadas com um ponto, como em .nome-da-classe. Veja um exemplo abaixo.
.conteudo {
background-color:red;
}
A formatação definida nessa classe será aplicada a todos os elementos que possuírem essa classe, independentemente de quais sejam esses elementos.
Seletor de atributo
Atributos HTML são palavras-chave que podem ser utilizadas em uma tag HTML para personalizar como aquele elemento se comporta. Um exemplo clássico de atributo, é o atributo type utilizado nas tags input para definir um tipo diferente para o input.
Dentro do CSS, podemos utilizar também esses atributos HTML como seletores. Um seletor de atributo nesse contexto possui uma sintaxe parecida com tag[atributo="valor"], como no exemplo abaixo.
input[type="text"]{
background-color: red;
}
A formatação especificada no exemplo será aplicada a todas as tags input que tiverem o atributo type igual a text, não importando onde elas se localizem no código. Para este seletor, acaba sendo importante especificar a tag, pois pode existir mais de um tipo de tag com o mesmo atributo. Essa sintaxe apresentada no exemplo possui algumas variações, que você pode conferir clicando aqui.
Seletor universal
O seletor * é conhecido como seletor universal, pois uma formatação associada a este seletor é aplicada a todos os elementos do HTML:
*{
background-color:red;
}
Combinando seletores
Apesar de serem muito úteis, os seletores básicos apresentados até aqui muitas vezes não são o suficiente para realizar a formatação do seu código, e por isso é possível combinar seletores através dos combinadores.
Os combinadores de seletores servem para especificar a relação entre dois ou mais seletores como nos exemplos abaixo onde utilizamos os seletores de tag p e span como operadores a serem combinados.
Seletor de descendentes
Este seletor combina vários seletores por meio de um caractere de espaço, como no exemplo:
p span{
background-color:red;
}
O estilo deste exemplo será aplicado a todas as tags span que estiverem numa tag p, mesmo que a tag span não seja filha direta da tag p.
Seletores de irmãos adjacentes
Este seletor utiliza o símbolo + como combinador. Veja o exemplo:
p + span{
backgrond-color:red;
}
O estilo deste exemplo será aplicado à todas as tags span que forem imediatamente precedidas de uma tag p.
Seletores de irmãos gerais
Este seletor utiliza o símbolo ~ como combinador entre seletores, como no exemplo:
p ~ span{
background-color:red;
}
O estilo deste exemplo será aplicado à todas as tags span que forem precedidas de uma tag p em um mesmo elemento pai.
Seletor de filhos
Este seletor utiliza o símbolo > como combinador entre dois seletores, como no exemplo:
p > span{
background-color:red;
}
O estilo deste exemplo será aplicado à todas as tags span que forem filhas diretas de uma tag p.
Considerações finais
Os seletores apresentados neste artigo são capazes de selecionar diversos tipos de elementos, e permitem que você faça formatações em elementos específicos.
