Os seletores CSS nos permitem formatar determinadas partes
do nosso código HTML de forma simples e abrangente. Dessa maneira, podemos
especificar o que e quando queremos que determinada regra seja
aplicada na nossa página. Isso gera uma codificação mais semântica e, sendo
utilizada da forma correta, com zero redundância (o que é a nossa meta sempre).
Seletor universal: Seleciona qualquer elemento.
Padrão
|
Significado
|
Exemplo CSS
|
*
|
Seletor universal, seleciona qualquer elemento, sem distinção.
|
*{
Color: #000000;
}
|
Exemplo de
utilização:
CSS:
RENDERIZADO NO NAVEGADOR:
Seletor de tipo de elemento: Seleciona qualquer tipo de elemento.
Obs:
O “e” utilizado na tabela abaixo não
é um elemento, ele apenas indica
um elemento qualquer. Nos exemplos o
trocarei por um <a> ou <p>, por exemplo.
Padrão
|
Significado
|
Exemplo CSS
|
e
|
Seletor do tipo elemento: seleciona qualquer
elemento <e>
|
e{
color:
#000000;
}
|
Exemplo de utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Seletor
contextual: Seleciona qualquer elemento <f> (secundário) que
estiver contido num elemento <e> (primário).
Obs:
As letras “e” e “f” utilizadas na tabela abaixo não são
elementos,
elas são apenas ilustrativas. Nos exemplos o trocarei por um <a> ou <p>, por exemplo.
Padrão
|
Significado
|
Exemplo CSS
|
e f
|
Seletor contextual: seleciona qualquer elemento
<f> que estiver contido num elemento <e>
|
h1 em{
color:
blue;
}
|
Exemplo de utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Seletor de elementos-filho:
Seleciona qualquer elemento <f> descendente
direto de um elemento <e>. Ou seja, se o elemento <f> ou o
<e> estiverem isolados, ou estiverem indiretamente ligados, a formatação
não lhes será aplicada.
Padrão
|
Significado
|
Exemplo CSS
|
e > f
|
Seletor de elementos-filho: Seleciona
qualquer elemento <f> (secundário) descendente direto de um elemento
<e> (primário).
|
body > p{
line-height:1.3;
}
|
Exemplo de utilização:
CSS:
RENDERIZADO NO NAVEGADOR:
Seletor adjacente: Seleciona qualquer tipo de elemento que esteja
imediatamente após um elemento.
Padrão
|
Significado
|
Exemplo CSS
|
e + f
|
Seletor adjacente: seleciona o elemento <f>
que estiver imediatamente após um elemento <e>.
|
h1 + h2{
margin-top:-5mm;
}
|
Exemplo de utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Seletor de classe: A classe só será aplicada ao elemento que está relacionado
a ela no CSS, tão e somente isso. Se no HTML a classe for aplicada a algum
outro elemento, não haverá alteração alguma na formatação.
Padrão
|
Significado
|
Exemplo CSS
|
e.classe
|
Seletor de classe: Seleciona o(s) elemento(s) <e> em que se
aplicou a “classe”.
|
h1.pastoral{
color:green;
}
|
Exemplo de
utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Seletor de ID: Geralmente utilizado quando se deseja aplicar mais de um
estilo para o mesmo elemento. Com o ID para
diferenciá-los, não há conflito de regras e as instruções podem ser
renderizadas pelo navegador.
Padrão
|
Significado
|
Exemplo CSS
|
e#id
|
Seletor de classe: Seleciona o(s) elemento(s) <e> identificado
com um ID.
|
h1#chapter1{
text-align:center;
}
|
Exemplo de
utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Agrupamento de seletores: O
princípio básico do agrupamento de seletores é simplesmente aplicar o mesmo
estilo a seletores diferentes, sem ter de repeti-los para adicionar as mesmas
regras. Isso evita a redundância de informações e gera um código íntegro e
integral.
Padrão
|
Significado
|
Exemplo CSS
|
e,f
|
Agrupamento de seletores: Selecione os elementos <e> e
<f> do agrupamento.
|
h1, h2{
font-family:sans-serif;
}
|
Exemplo de
utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Seletores de atributos:
Um seletor de atributo seleciona os
atributos de algum elemento específico. Para que essa seleção aconteça, os
elementos devem estar atribuídos ao seletor no próprio CSS, caso contrário, não
haverá a estilização da determinada parte do código.
Padrão
|
Significado
|
Exemplo CSS
|
e [atrib]
|
Seletor de atributo: Seleciona o elemento <e> que contenha o
atributo indicado.
|
h1[title]{
color:blue;
}
|
Exemplo de
utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Padrão
|
Significado
|
Exemplo CSS
|
e [atrib=”valor”]
|
Seletor de atributo: seleciona o elemento <e> com o mesmo
atributo e “valor”
|
span
[class=exemplo]{
color:blue;
}
|
Exemplo de
utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Padrão
|
Significado
|
Exemplo CSS
|
e [atrib~=”valor”]
|
Seletor de atributo: seleciona o elemento <e> em que “valor” de
atributo esteja em uma lista de valores separados por espaços.
|
a[rel~=”copyright”]{
color:red;
}
|
Exemplo de
utilização:
CSS:
RENDERIZADO NO NAVEGADOR:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
Padrão
|
Significado
|
Exemplo CSS
|
e [atrib|=”valor”]
|
Seletor de atributo: seleciona o elemento <e> em que “valor” do
atributo seja idêntico a “valor” ou inicia-se com “valor”.
|
*[lang”=”pt”]{
color:red;
}
|
Exemplo de utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
CSS:
RENDERIZADO NO NAVEGADOR:
PSEUDO CLASSES:
As pseudo-classes tem como função a adição de diferentes
efeitos aos seletores.
São separadas em dois tipos:
1) Pseudo-classes dinâmicas: Elas
controlam o estado dos elementos;
2) Pseudo-classes estruturais: Selecionam algum elemento dentro da
estrutura do código.
PSEUDO-CLASSES
DINÂMICAS:
Padrão
|
Significado
|
Exemplo CSS
|
a:link
|
Pseudo-classe link: Aplica-se ao elemento <a> com hiperlinks ou
âncoras ainda não visitados.
|
a:link{
color:green;
}
|
a:visited
|
Pseudo-classe visited: Ao contrário do 1º, aplica-se somente aos
links já visitados.
|
a:visited{
color:blue;
}
|
e:active
|
Pseudo-classe active: Aplica-se ao elemento <e> quando esse for
ativado pelo usuário.
|
a:active{
color:red;
}
|
e:hover
|
Pseudo-classe hover: Aplica-se ao elemento <e> quando o cursor
estiver sobre ele, mas sem ativá-lo.
|
a:hover{
background-color:yellow;
}
|
CSS:
HTML:
/*Aplicando sub-classes aos links:*/
a:link{ color:#91E600; /*Cor do link.*/ }
a:visited{
color:#CC0066; /*Cor do link visitado.*/
}
a:active{
color:#fff; /*Cor do link ativo (quando se mantém pressionado).*/ }
a:hover{ background-color:#FFCC99; /*Cor de
fundo do link ao se passar o mouse em cima.*/ }
Padrão
|
Significado
|
Exemplo CSS
|
e:focus
|
Pseudo-classe focus: Aplica-se ao elemento <e> quando o foco
estiver posicionado nele.
|
a:focus{
background:yellow;
}
|
e:lang(val)
|
Pseudo-classe lang: Aplica-se ao elemento <e> se este estiver
marcado com o idiota “val”.
|
html:lang(pt) {
Quotes: ‘< ‘ ‘
>’;
}
|
Abaixo terá um exemplo de como
usar ambas as pseudo-classes mostradas acima.
O “focus”, deixará em foco os
campos input do formulário. Notório o fato de que o campo de mensagem ao ser
focado, não ficará na cor avermelhada. Motivo: Se trata de uma textarea e não
de um input propriamente dito.
Para cada uma das linguagens
(pt-br ou en), adicionei uma formatação CSS. Sempre que essas classes de
linguagem estiverem dentro de um form, a formatação não será a mesma para
ambas.
Exemplo de
utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
PSEUDO ELEMENTOS:
Padrão
|
Significado
|
Exemplo CSS
|
e:first-line
|
Pseudo-elemento first-line: Aplica-se à primeira linha do elemento
<e>.
|
p:first-line{
text-transform:
uppercase;}
|
e:first-letter
|
Pseudo-elemento first-letter: Aplica-se à primeira letra do elemento
<e>.
|
p:first-letter{
Font-size: 3em;
font-weight:notmal;
}
|
e:before
|
Pseudo-elemento before: Aplica conteúdo especificado em posição
anterior ao elemento <e>.
|
e:before{
content:open-quote;
}
|
e:after
|
Pseudo-elemento after: Aplica conteúdo especificado em posição
posterior ao elemento <e>.
|
e:after{
content:open-quote;
}
|
Exemplo de
utilização:
CSS:
HTML:
RENDERIZADO NO NAVEGADOR:
0 comentários:
Postar um comentário