Bruno C. de Paula
Laboratório de Informática
CSS Seletores
Seletores do CSS 2.1
1º Semestre 2010 > PUCPR > BSI
Resumo da aula
Continuaremos
nosso trabalho com a
linguagem de seletores;
Hoje trabalharemos com os seletores
introduzidos no CSS 2.1;
Devemos ter especial cuidado com estes
seletores: seu suporte é restrito no Internet
Explorer 6 e 7;
Conheceremos, porém, maneiras de
contornar esta limitação através da
linguagem JavaScript.
3
Material referente ao assunto da aula
 Tutorial
sobre regras CSS:
http://maujor.com/tutorial/sintaxetut.php
 Tutorial seletores CSS 2.1:
http://maujor.com/tutorial/seletores
_css21_parte1.php
 Recomendação W3C do CSS 2.1 (em Inglês):
http://www.w3.org/TR/CSS21/selector.html
#pattern-matching
4
Material referente ao assunto da aula
 Capítulo
do Livro CSS – Guia de Bolso:
http://altabooks.tempsite.ws/capitulos_am
ostra/00_cssbolso.pdf
 Tabela com resumo de todos os seletores do
CSS e sua compatibilidade:
http://kimblim.dk/css-tests/selectors/
 Documentação sobre seletores do site da
Microsoft:
http://msdn.microsoft.com/enus/library/aa358816(VS.85).aspx
5
Material referente ao assunto da aula
 CSS
– Guia de Bolso;
Editora AltaBooks;
2008;
Download de um
capítulo.
6
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag
de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag
de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
7
8
Seletores CSS referenciados na aula (em
Inglês –site SitePoint)
Seletor
universal (*);
Seletor filho (E > F);
Seletor irmão adjacente (E + F);
Pseudo-classe dinâmica “sobre o
elemento” (E:hover);
Pseudo-classe dinâmica foco
(E:focus);
Seletores CSS referenciados na aula
(em Inglês –site SitePoint)
9
 Pseudo-classe
primeiro filho
(E:first-child);
 Pseudo-classe idioma (E:lang(c));
 Pseudo-elemento de conteúdo inserido antes
de outro (E:before);
 Pseudo-elemento de conteúdo inserido depois
de outro (:after).
Seletores CSS referenciados na aula
– Seletores de Atributo
10
Seletor
de elemento com atributo
existente (existência):
E[atr];
Seletor de elemento com valor de
atributo igual ao valor especificado
(igualdade):
E[atr=val].
Seletores CSS referenciados na aula
– Seletores de Atributo
11
 Seletor
de elemento com valor de atributo
contido em uma lista separada por espaços
(espaço em branco);
E[atr~=val]
 Seletor de elemento com valor de atributo
iniciando com o prefixo seguido de “-”
(hífen):
E[atr|=val].
12
Relembrando a aula passada...
13
14
Versões do CSS
 1.0: Todos os navegadores do mercado
implementam.
15
Versões do CSS (retrocompatíveis)
 2.0/2.1:
Implementado em grande parte dos
navegadores (implementação parcial: ie7,
quase nula: ie6); Aula de hoje.
 3.0:
Em discussão avançada,
implementação parcial em alguns
navegadores (Opera, Firefox, Safari, Chrome,
IE 8 e 9);
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
16
Assunto de hoje: só seletores!
E do CSS 2.1
17
18
Os seletores do CSS 2.1 são
implementados por todas as
plataformas principais
(menos IE6)!
19
ie6
Use com cuidado!
20
CSS 2.1 funciona bem no
IE8 e IE9!
Tabela de compatibilidade
CSS 2.1 x Navegadores
Fonte: fonte: http://kimblim.dk/css-tests/selectors/
21
Ie6 pode ser um navegador
importante no mercado por algum
tempo!
22
 Soluções:
Ignorar ie6;
Criar interface específica para ie6;
“Emular” alguns recursos do CSS 2.1 via
JavaScript para “transformar” o navegador;
23
“Transformação” de ie5.5 para IE9
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
24
Lista dos Seletores do CSS 2.1
Seletor
Tipo
Observações
*
Universal
* Uso em CSS Reset
* Funciona no ie6
E>F
Filho
E+F
Irmão adjacente
E:hover
Hover (mouse
sobre)
No ie6 só a:hover
funciona!
E:focus
Foco no teclado
Forms e links
04/11/2015
25
Seletor
Tipo
E:first-child
Primeiro filho
E:lang(C)
Idioma
E:before
Inserção de
conteúdo antes
E:after
04/11/2015
Inserção de
conteúdo depois
Observações
ie7
ie7
ie7
26
Seletor
Tipo
E[atr]
Atributo existente
E[atr=val]
Atributo igualdade
E[atr~=val]
Atributo espaço em
branco
Com atributo
class não precisa
E[atr|=val]
Atributo prefixo
Usar com tag a e
atributo hreflang
04/11/2015
Observações
27
28
Seletor universal (*)
 Casamento
04/11/2015
com elemento de qualquer tipo;
29
Significado: coloque a cor amarela e
o fundo azul em todos os elementos
dentro de um div, independente do
tipo
30
31
CSS Reset
*{
margin: 0;
padding: 0;
}
Elimina margens e espaçamentos
padrão de todos os elementos
Localização / Depuração de
elementos CSS
32
33
Seletor filho (E > F)
 Casamento
com todos os elementos filhos
imediatos de um elemento;
 Diferente do seletor descendente!
34
Significado: deixar em verde e com
fonte grande todos os <em> filhos
imediatos de um div
35
36
Seletor irmão adjacente (E + F)
 Casamento
com um elemento irmão e
adjacente (F) ao primeiro elemento (E);
 Elementos com mesmo pai;
 Primeiro elemento no mesmo nível do
segundo;
 Útil para seleção de inputs após labels
(label+input);
37
Significado: trocar o fundo de todos
os parágrafos imediatamente
colocados após um elemento <h2>
38
Significado: sublinhar todos os
parágrafos depois de um parágrafo,
ou seja, em uma lista de parágrafos,
formatar todos menos o 1º
39
Pseudo-classe dinâmica “sobre o
elemento” (E:hover)
40
 Casamento
com um elemento cujo mouse
está sobre ele;
 No IE6 funciona o a:hover!
ie6
41
Significado: quando o mouse passar
sobre um link (tag <a>), troque o
fundo para vermelho e elimine
qualquer tipo de sublinhado
42
43
Ordem correta de aplicação das
pseudo-classes de link
 Link,
Visited, Hover, Active;
 Mnemônico: LoVeHAte;
 Se considerar o focus: LoVe Fears HAte;
44
Pseudo-classe dinâmica foco
(E:focus)
45
 Casamento
com elemento que está com o
foco para digitação;
 Não funciona no IE7.
ie7
46
Significado: quando o usuário estiver
com o foco de teclado em uma área
de texto qualquer, troque o fundo da
área para vermelho
47
Ordem correta de aplicação das
pseudo-classes de link (com focus)
 Link,
Visited, Hover,
48
Focus, Active;
Ver mais detalhes em:
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-thelink-states/
04/11/2015
Pseudo-classe primeiro filho (E:firstchild)
49
 Casamento
com um elemento quando ele é o
primeiro filho de seu pai;
50
Significado: muda para vermelho a
cor de fundo de todos os <li> que
são o primeiro filho de seu elemento
pai
51
52
Pseudo-classe idioma (E:lang(C))
 Seleciona
o elemento com o idioma
indicado;
 Para especificar o idioma, usar atributo
lang.
 Não funciona ie7.
ie7
53
Significado: mudar para vermelho a
cor de fundo de todos os elementos
da língua Português e suas variantes
54
Pseudo-elemento de conteúdo
inserido antes de outro (:before)
55
 Gera
conteúdo antes do elemento
especificado através da propriedade content;
 Comportamento complexo, mas poderoso;
 Não funciona no IE7.
ie7
04/11/2015
56
Significado: Coloca o texto “Pais: “
antes de todos os parágrafos.
57
Pseudo-elemento de conteúdo
inserido depois de outro (:after)
58
 Gera
conteúdo depois do elemento
especificado;
 Não funciona no IE7;
ie7
59
Significado: Coloca o texto indicado
após todos os parágrafos.
60
Seletor de elemento com atributo
existente (existência) (E[atr])
 Seleciona
um elemento quando o atributo
especificado entre colchetes [] existir;
Significado: coloca sublinhado em
todos os parágrafos que tiverem o
atributo id
Significado: deixa verde qualquer
elemento que possua o atributo title
Significado: coloca mensagem após
todo elemento que possui título
Seletor de elemento com valor de
atributo igual (igualdade) (E[atr=val])
 Seleciona
um elemento quando o valor do
atributo especificado na regra for igual
ao valor encontrado no elemento;
Significado: coloca uma borda em
todos os links cujo atributo rel seja
igual ao valor tag
Para mais detalhes sobre o significado de rel=tag, acesse o link:
http://microformats.org/wiki/rel-tag-pt-br
Significado: coloque um tachado
(linha cortando) todos os links com
valor de atributo rel igual a nofollow
Para mais detalhes sobre o significado de rel=nofollow, acesse o link:
http://googlediscovery.com/2007/08/18/aprenda-a-usar-o-relnofollow-e-evite-ser-punido-pelo-google/
Alteração de todos os inputs de um
certo tipo
Seletor de elemento com valor de
atributo contido em lista (espaço)
(E[atr~=val])
 Seleciona um elemento quando o valor do
atributo especificado na regra estiver
contido dentro de uma lista separada
por espaços no valor do atributo do
elemento selecionado;
Significado: seleciona todos os
parágrafos nos quais, dentro do
atributo title contiver uma lista
separada por espaços e a palavra
microsoft
75
O seletor E[atr~=val] não é
necessário quando se precisa
aplicar 2 (ou mais) classes a um
elemento.
Separe as classes por espaço no
atributo class.
76
Seletor de elemento com prefixo
(hífen) (E[atr|=val])
 Faz
o casamento com elementos cujo valor
de atributo seja igual, ou opcionalmente,
seguido por um hífen;
 Usado, geralmente com atributo hreflang
(indica o idioma do conteúdo linkado).
 Não use com o atributo lang!
Significado: seleciona o link cujo
idioma de destino seja o Português
80
Material referente ao assunto da aula
 Tutorial
sobre regras CSS:
http://maujor.com/tutorial/sintaxetut.php
 Tutorial seletores CSS 2.1:
http://maujor.com/tutorial/seletores
_css21_parte1.php
 Recomendação W3C do CSS 2.1 (em Inglês):
http://www.w3.org/TR/CSS21/selector.html
#pattern-matching
81
Material referente ao assunto da aula
 Capítulo
do Livro CSS – Guia de Bolso:
http://altabooks.tempsite.ws/capitulos_am
ostra/00_cssbolso.pdf
 Tabela com resumo de todos os seletores do
CSS e sua compatibilidade:
http://kimblim.dk/css-tests/selectors/
 Documentação sobre seletores do site da
Microsoft:
http://msdn.microsoft.com/enus/library/aa358816(VS.85).aspx
82
Material referente ao assunto da aula
 CSS
– Guia de Bolso;
Editora AltaBooks;
2008;
Download de um
capítulo.