CSS – Seletores Básicos #1

CSS – Seletores Básicos #1

O que são seletores CSS  e como usá-los ?

Caso você esteja iniciando no desenvolvimento web e tenha dúvidas iniciais como essa acima. Irei escrever uma série de artigos com temas para iniciantes pertinentes ao uso de CSS.

Seletores são utilizados para definir regras de estilos para páginas web, os seletores tem a função de “identificar” determinados elementos do HTML e aplicar estilos a estes elementos, de modo simples é a forma como iremos descrever a aparência de nossa página.

Para se aplicar estes estilos então utilizamos os seletores CSS, existem mais de 30 seletores nos dias atuais, recomendo fortemente que você conheça TODOS.

Vejo em muitos projetos front-end o desenvolvedor tendo que recorrer a JS para aplicar alguns efeitos quando ele poderia estar utilizando alguns seletores mais modernos, porém neste post irei abordar apenas os seletores mais comuns e simples de usar.

O primeiro deles é o seletor Universal:

O seletor ( * ) asterisco, tem a função de selecionar todos os elementos, muito utilizado para “resetar” os estilos de uma página toda, por exemplo, definir o tamanho padrão da fonte para toda a página. Este seletor foi implementado a partir da versão 2.


O seletor de Classe:

O seletor mais comumente utilizado, as vezes até de maneira errada e exaustiva, este seletor faz uso da propriedade “class” dos elementos HTML para realizar a aplicação dos estilos. A mesma “class” pode ser utilizada inúmeras vezes sem restrição de quantidade em uma mesma página HTML, no arquivo CSS você deve declarar o seletor precedido por um “.” ponto. Este seletor pertence ao CSS desde a versão 1.


O seletor por ID:

O seletor por ID utiliza a a propriedade id dos elementos HTML, no arquivo CSS o seletor deve ser declarado precedido por “#” e então o nome do ID. Em um arquivo HTML padronizado você deve utilizar apenas uma unica vez um mesmo id, em nosso exemplo o id “btn” não deve ser utilizado novamente na mesma página. Este seletor existe desde a versão 1.


O seletor de Elemeto

Este seletor é capaz de capturar todos os elementos de uma determinada tag de toda página, em nosso exemplo vemos que todos os elementos “p” da página receberão o estilo definido em nosso arquivo CSS. Este seletor existe desde a versão 1.


O seletor de elementos internos

Este seletor captura todos os elementos internos de um outro seletor, em nosso exemplo temos o seletor de classe “.painel” e declaramos que todos as tags “a” dentro da classe “.painel” devem ter o tamanho da fonte 22px e a cor azul, nesse exemplo os elementos “p” e “input” não são alterados. Este seletor existe desde a versão 1.


Seletor em conjunto

Neste exemplo, podemos atribuir o mesmo estilo para vários seletores utilizando uma vírgula entre os seletores, em nosso exemplo todos os elementos “p” receberão os estilos e o ultimo elemento “a” que é o único que contem a classe “.link” irá receber o estilo. Este seletor existe desde a versão 1.

 

Você encontra uma lista de todos os seletores em www.w3schools.com/cssref/css_selectors.asp

 

Então é isso pessoal, uma breve e introdutória forma de se usar seletores CSS.

Se tiver algo que deseja aprender deixe seu comentário e terei o prazer em aprender e escrever.

 

Até a próxima.

Related Posts