|
Os seletores CSS s�o usados para selecionar o conte�do que voc� deseja estilizar. Os seletores fazem parte do conjunto de regras CSS.
Os seletores CSS selecionam os elementos HTML de acordo com seu id, classe, tipo, atributo etc.
Existem v�rios tipos diferentes de seletores em CSS. Vejamos alguns:
- Seletor de elemento CSS
- Seletor de Id CSS
- Seletor de classe CSS
- Seletor universal CSS
- Seletor de Grupo CSS
1) Seletor de Elemento CSS
O seletor de elemento seleciona o elemento HTML por nome.
Vejamos um exemplo:
Para executar esse c�digo, copie o conte�do com Ctrl+A e cole no Notepad++. Salve esse arquivo como:
css-exemplo-4.1.html e execute no seu navegador.
O resultado desse c�digo ser� o seguinte:
Figura 4.1 � Resultado do c�digo acima.
2) Seletor de Id CSS
O seletor id seleciona o atributo id de um elemento HTML para selecionar um elemento espec�fico. Um id � sempre �nico na p�gina,
por isso � escolhido para selecionar um elemento �nico e exclusivo.
Ele � escrito com o caractere hash (#), seguido pelo id do elemento.
Vejamos um exemplo com o id "para1".
Para executar esse c�digo, copie o conte�do com Ctrl+A e cole no Notepad++. Salve esse arquivo como:
css-exemplo-4.2.html e execute no seu navegador.
O resultado desse c�digo ser� o seguinte:
Figura 4.2 � Resultado do c�digo acima.
3) Seletor de classe CSS
O seletor de classe seleciona elementos HTML com um atributo de classe espec�fico.
� usado com um caractere de ponto final. (s�mbolo de ponto final) seguido do nome da classe.
OBS.: O nome de uma classe n�o deve ser iniciado com um n�mero.
Vejamos um exemplo utilizando a classe "center":
Para executar esse c�digo, copie o conte�do com Ctrl+A e cole no Notepad++. Salve esse arquivo como:
css-exemplo-4.3.html e execute no seu navegador.
O resultado desse c�digo ser� o seguinte:
Figura 4.3 � Resultado do c�digo acima.
Seletor de classe CSS para elemento espec�fico
Se voc� deseja especificar que apenas um elemento HTML espec�fico deve ser afetado, voc� deve usar o nome do elemento com o seletor de classe.
Vejamos um exemplo:
Para executar esse c�digo, copie o conte�do com Ctrl+A e cole no Notepad++. Salve esse arquivo como:
css-exemplo-4.4.html e execute no seu navegador.
O resultado desse c�digo ser� o seguinte:
Figura 4.4 � Resultado do c�digo acima.
4) Seletor universal CSS
O seletor universal � usado como um caractere curinga. Ele seleciona todos os elementos nas p�ginas.
Vejamos um exemplo utilizando a classe "center":
Para executar esse c�digo, copie o conte�do com Ctrl+A e cole no Notepad++. Salve esse arquivo como:
css-exemplo-4.5.html e execute no seu navegador.
O resultado desse c�digo ser� o seguinte:
Figura 4.5 � Resultado do c�digo acima.
5) Seletor de Grupo CSS
O seletor de agrupamento � usado para selecionar todos os elementos com as mesmas defini��es de estilo.
Esse seletor � usado para minimizar o c�digo. As v�rgulas s�o usadas para separar cada seletor no agrupamento.
Vamos ver o c�digo CSS sem o seletor de grupo.
Como voc� pode ver, voc� precisa definir as propriedades CSS para todos os elementos. Ele pode ser agrupado das seguintes maneiras:
Vejamos agora o exemplo completo do seletor de grupo CSS.
Para executar esse c�digo, copie o conte�do com Ctrl+A e cole no Notepad++. Salve esse arquivo como:
css-exemplo-4.6.html e execute no seu navegador.
O resultado desse c�digo ser� o seguinte:
Figura 4.6 � Resultado do c�digo acima.
*****
| 
