2. 1.SELETORES CSS
O que são os seletores CSS?
O CSS atinge a formatação do código de forma bem abrangente e modular e isto é
feito através dos seletores CSS, estes por sua vez nos permite selecionar diversos
trechos de código e aplicar estilos a eles.
Isto é feito através de um conceito simples aonde utilizamos alguns pontos chaves do
HTML, como âncora para estipular os estilos.
1.1 SELETOR UNIVERSAL
Padrão Significado Exemplo CSS Exemplos HTML
* Qualquer elemento
*{
color: #000000;
} Aplicável a todos os elementos
1.2 SELETOR DE TIPO DE ELEMENTO
Padrão Significado Exemplo CSS Exemplos HTML
e
Seleciona qualquer elemento
<e>
e{
font-family: sans-
serif;} <e>...</e>
1.3 SELETOR CONTEXTUAL
Padrão Significado Exemplo CSS Exemplos HTML
e f
Seleciona qualquer elemento <f>
que estiver contido num elemento
<e>.
h1 em {
color: blue;
} <e>...<f>...</f>...</e>
3. 1.4 SELETOR DE ELEMENTOS FILHO
Padrão Significado Exemplo CSS Exemplos HTML
e > f
Seleciona qualquer elemento <f>
descendente direto de um
elemento <e>.
body > p {
line-height: 1.3;
}
margin-top: -5mm;
}
color: blue;
} <e>...<f>...</f>...</e>
1.5 SELETOR ADJACENTE
Padrão Significado Exemplo CSS Exemplos HTML
e + f
Seleciona qualquer elemento <f>
que estiver imediatamente após um
elemento <e>.
h1 + h2 {
margin-top: -5mm;
} <e>...</e> <f>....<f>
1.6 SELETOR CLASSE
Padrão Significado Exemplo CSS Exemplos HTML
e.classe
Seleciona o(s) elemento(s) <e>
em que se aplicou a "classe".
h1.pastoral {
color: green;
} <e class="classe"... />
1.7 SELETOR ID
Padrão Significado Exemplo CSS Exemplos HTML
e# ID
Seleciona o elemento <e>
identificado com ID.
h1#chapter1 {
text-align: center;
} <e Id="Id"... />
1.8 AGRUPAMENTO DE SELETORES
Padrão Significado Exemplo CSS Exemplos HTML
e , f
Seleciona os elementos <e>
e <f> do agrupamento.
h1, h2 {
font-fanily: sans-
serif;
} <e> ... </e> ... <f> ... </f>
4. 1.9 SELETORES DE ATRIBUTO
Padrão Significado Exemplo CSS Exemplos HTML
e
[atrib]
Seleciona o elemento <e>
que contenha o atributo
indicado.
h1 [title] {
color: blue;
} <e atrib="valor" .... />
Padrão Significado Exemplo CSS Exemplos HTML
e
[atrib="valor"]
Seleciona o elemento <e>
com o mesmo atributo e "valor".
span [class=exemplo] {
color: blue;
} <e> ... </e> ... <f> ... </f>
Padrão Significado Exemplo CSS Exemplos HTML
e
[atrib~="valor"]
Seleciona o elemento <e>
em que "valor" de atributo
esteja em uma lista de
valores separadas por
espaços.
a [rel~="copyright"] {
color: red;
}
<a rel="copyright
copyleft
copyditor" ...> .. </a>
Padrão Significado Exemplo CSS Exemplos HTML
e[atrib |
="val"]
Seleciona o elemento <e>
em que valor do atributo
seja idêntico a "val" ou
inicia-se com "val".
a[lang|"pt"] {
color: red;
} <e lang="pt-BR" .../>
1.10 PSEUDO-CLASSES
Padrão Significado Exemplo CSS Exemplos HTML
e:first-child
Seleciona o primeiro elemento <e>
descendente do elemento-pai.
div > p:first-child {
text-indent: 0;
}
<p> Último p antes de
'nota'
<DIV class="nota">
<p> Primeiro p após
nota'.
</div>
Padrão Significado Exemplo CSS Exemplos HTML
a:link
Aplica-se ao elemento <a>
com hiperlinks ou âncoras
ainda não visitados.
a:linh {
color: red;
}
<a
href="http://endereço.
link/
">link</a>
5. Padrão Significado Exemplo CSS Exemplos HTML
e:visited
Aplica-se ao elemento <a>
com hiperlinks ou âncoras
já visitados.
a: visited {
color: blue;
}
<a
href="http://endereço.
link/
">link</a>
Padrão Significado Exemplo CSS Exemplos HTML
e:active
Aplica-se ao elemento <e>
quando este for ativado pelo
usuario.
Aplica-se ao elemento <e>
quando este for ativado pelo
usuario.
a: active {
color: line;
}
<a
href="http://endereço.
link/
">link</a>
Padrão Significado Exemplo CSS Exemplos HTML
e:hover
Aplica-se ao elemento <e>
quando o cursor estiver
sobre ele, mas sem ativá-lo.
a: hover {
color: yellow;
}
<a
href="http://endereço.
link/
">link</a>
Padrão Significado Exemplo CSS Exemplos HTML
e:focus
Aplica-se ao elemento <e>
quando o o foco estiver
posicionado nele.
a: focus {
background: yellow;
}
<a
href="http://endereço.
link/
">link</a>
Padrão Significado Exemplo CSS Exemplos HTML
e:lang(val)
Aplica-se ao elemento <e>
se estiver marcado com o idioma
"val"
html:lang(pt) {quotes:
'<< ' ' >>';} <e lang="pt" ... />
1.11 PSEUDO-ELEMENTOS
Padrão Significado Exemplo CSS Exemplos HTML
e:first-line
Aplica-se ao elemento à
primeira linha do elemento
<e>.
p:first-line {
text-transform:
uppercase;} <e>...</e>
6. Padrão Significado Exemplo CSS Exemplos HTML
e:first-letter
Aplica-se à primeira letra
do elemento <e>.
p: first-letter {
font-size: 3em; font-
weight: normal;
} <e>...</e>
Padrão Significado Exemplo CSS Exemplos HTML
e:before
Aplica conteúdo especificado
em posição anterior ao
elemento <e>.
e: before {
content: open-quote;
} <e>...</e>
Padrão Significado Exemplo CSS Exemplos HTML
e:after
Aplica conteúdo especificado
em posição anterior ao
elemento <e>.
e: after {
content: close-quote;
} <e>...</e>
Fonte: W3C
Link: http://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-css-w3cbr.pdf
7. EXEMPLO DE SELETOR
Para esse exemplo iremos utilizar o seletor e:active, esse seletor aplica-se para
qualquer elemento quando for ativado pelo usuário, no exemplo a seguir iremos utilizar
o elemento <a>.
Quando o usuário clicar no link para acessar a página do google, o mesmo irá mudar
de color no caso LIME, conforme ilustrado no exemplo abaixo:
Código:
Navegador:
