Muitas pessoas sabem que o CSS é uma tecnologia indispensável no desenvolvimento web, no entanto muitos desenvolvedores acabam não se aprofundando nela. Por isso, resolvi apresentar alguns fundamentos de CSS aqui no blog da Cod3r, e neste artigo vamos falar sobre alguns seletores básicos do CSS.

O que são seletores?

Podemos entender seletores CSS como uma regra que vai definir em quais elementos HTML aplicaremos o estilo especificado. 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 especificar ainda mais onde se deve aplicar a formatação.

Tipos de seletores CSS

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:

div{
	background-color:red;
}

Essa estrutura aplicará a formatação à todas as tags div que existirem no seu documento HTML, sem exeção.

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 pode se repetir no resto do documento. Dessa forma, a utilização de um seletor por id seja muito útil quando você quer aplicar uma formatação a um elemento específico.

Representamos os ids no CSS com um #, então um seletor CSS de id possui a sintaxe #nome-do-id, como é possível ver no exemplo:

#conteudo{
	background-color:red;
}

O estilo mostrado no exemplo será aplicado à tag que possui o id conteudo, não importando qual tag seja essa.

Seletor de classe

Definimos uma classe na tag de abertura de um elemento HTML assim como um id, porém, enquanto um id deve ser único e representar a um único elemento, uma classe pode representar vários elementos, e um elemento pode possuir mais de uma classe.

As classes no CSS são identificadas com um . (ponto), então um seletor CSS de classe possui a sintaxe .nome-da-classe, como é possível ver no exemplo:

.conteudo{
	background-color:red;
}

Assim, a formatação definida nessa classe será aplicada à todas as tags que possuírem essa classe, sendo elas do mesmo tipo, ou não.

Seletor de atributo

Utilizamos estes tipos de seletores principalmente para realizar a formatação de tags input em formulários, já que escolhemos tipo de uma tag input de acordo com o valor do atributo type, como type = “text”.

Um atributo no CSS é identificado por estar entre colchetes, e um seletor de atributo possui uma sintaxe parecida com tag[atributo = “valor”], assim como no exemplo:

input[type = "text"]{
	background-color: red;
}

Quero salientar aqui que a especificação da tag é importante, pois podem existir mais de um tipo de tag que possua o mesmo atributo. Além disso, a sintaxe dos seletores de atributos possui algumas variações, além desta apresentada e você pode conferir todas essas variações na documentação da linguagem.

A formatação especificada no exemplo se aplicará a todas as tags input que tiverem o atributo type igual a text, não importando onde elas se localizem no código.

Seletor universal

O seletor * é conhecido como seletor universal, pois uma formatação associada a este seletor se aplicará a todos os elementos do HTML:

*{
	background-color:red;
}

Combinadores de 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 servem para especificar a relação entre dois seletores como nos exemplos abaixo onde utilizamos os seletores de tag p e span como exemplos:

Seletor de descendentes

Este seletor utiliza o espaço como combinador entre dois seletores, assim como no exemplo:

p span{
	background-color:red;
}

O estilo deste exemplo se aplicará à todas as tags span que estejam dentro de uma 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 entre dois seletores, como no 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 dois seletores, assim 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 dentro de um mesmo elemento pai.

Seletor de filhos

Este seletor utiliza o símbolo > como combinador entre dois seletores, assim como no exemplo:

p > span{
	background-color:red;
}

O estilo deste exemplo se aplicará apenas às 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, bem como permitir que você faça formatações em elementos extremamente específicos. No entanto, os seletores CSS vão muito além do que apresentamos neste artigo, e nós vamos trazer mais dessas funcionalidades em próximos posts aqui do blog.

Bons estudos!!