Bruno C. de Paula
Laboratório de Informática
Seletores
Seletores do CSS 2.1
1º Semestre 2009 > 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.
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/selet
ores_css21_parte1.php
Recomendação W3C do CSS 2.1 (em
Inglês):
– http://www.w3.org/TR/CSS21/selecto
r.html#pattern-matching
05/11/2015
3
Material referente ao assunto da
aula
Capítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulo
s_amostra/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
05/11/2015
4
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
05/11/2015
5
Tags HTML referenciadas na aula (em
Português –site Referenciando)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>.
05/11/2015
6
Tags HTML referenciadas na aula (em
Inglês – site SitePoint)
Tag de estilo: <style>;
Tag de link: <link>;
Tag de script: <script>;
05/11/2015
7
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);
05/11/2015
8
Seletores CSS referenciados na
aula (em Inglês –site SitePoint)
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).
05/11/2015
9
Seletores CSS referenciados na
aula – Seletores de Atributo
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].
05/11/2015
10
Seletores CSS referenciados na
aula – Seletores de Atributo
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].
05/11/2015
11
Exemplos da aula
Seletor universal (*);
Seletor universal aplicado em CSS
Reset;
Seletor universal aplicado no debug do
posicionamento dos elementos;
Seletor filho (E > F);
Seletor irmão adjacente (E + F);
Pseudo-classe dinâmica hover
(E:hover);
05/11/2015
12
Exemplos da aula
Pseudo-classe dinâmica hover aplicada
em links;
Pseudo-classe dinâmica focus (E:focus);
Pseudo-classe dinâmica focus aplicada
em links;
Pseudo-classe primeiro filho (E:firstchild);
Pseudo-classe lang (E:lang(C));
Pseudo-elemento before (E:before);
Pseudo-elemento after (E:after);
05/11/2015
13
Exemplos da aula
Seletor atributo existente (E[atr]);
Seletor atributo igualdade (E[atr=val]);
Seletor atributo igualdade aplicado em
itens de formulário;
Seletor atributo espaço em branco
(E[atr~=val]);
Seletor atributo espaço em branco
aplicado à classe;
Seletor atributo prefixo (E[atr|=val]).
05/11/2015
14
Relembrando a aula passada...
05/11/2015
15
05/11/2015
16
Versões do CSS
1.0: Todos os navegadores do
mercado implementam.
05/11/2015
17
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, implementação
parcial em alguns navegadores (Opera,
Firefox, Safari, Chrome);
05/11/2015
18
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
05/11/2015
19
Assunto de hoje: só seletores!
E do CSS 2.1
05/11/2015
20
Os seletores do CSS 2.1 são
implementados por todas as
plataformas principais
(menos IE6)!
05/11/2015
21
ie6
05/11/2015
Use com cuidado!
22
CSS 2.1 funciona no IE8!
05/11/2015
23
Tabela de compatibilidade
CSS 2.1 x Navegadores
Fonte: fonte: http://kimblim.dk/css-tests/selectors/
05/11/2015
24
Ie6 pode ser um navegador
importante no mercado por
algum tempo!
Soluções:
– Ignorar ie6;
– Criar interface específica para ie6;
– “Emular” alguns recursos do CSS 2.1
via JavaScript para “transformar” o
navegador;
05/11/2015
25
“Transformação” de ie6 em ie7
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
“Transformação” de ie6-7 em ie8
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->
Exemplo
05/11/2015
26
Lista dos Seletores do CSS 2.1
05/11/2015
27
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)
E:focus
Foco no teclado Forms e links
05/11/2015
No ie6 só a:hover
funciona!
28
Seletor
Tipo
E:first-child
Primeiro filho
E:lang(C)
Idioma
E:before
Inserção de
conteúdo antes
E:after
05/11/2015
Inserção de
conteúdo depois
Observações
ie7
ie7
ie7
29
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
05/11/2015
Observações
30
Seletor universal (*)
Casamento com elemento de qualquer
tipo;
05/11/2015
31
Significado: coloque a cor
amarela e o fundo azul em
todos os elementos dentro de
um div, independente do tipo
05/11/2015
32
05/11/2015
33
CSS Reset
*{
margin: 0;
padding: 0;
}
Elimina margens e espaçamentos
padrão de todos os elementos
05/11/2015
34
Localização / Depuração de
elementos CSS
05/11/2015
35
Seletor filho (E > F)
Casamento com todos os elementos
filhos imediatos de um elemento;
Diferente do seletor descendente!
05/11/2015
36
Significado: deixar em verde e
com fonte grande todos os
<em> filhos imediatos de um div
05/11/2015
37
05/11/2015
38
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;
05/11/2015
39
Significado: trocar o fundo de
todos os parágrafos
imediatamente colocados após
um elemento <h2>
05/11/2015
40
Significado: sublinhar todos os
parágrafos depois de um
parágrafo, ou seja, em uma lista
de parágrafos, formatar todos
menos o 1º
05/11/2015
41
05/11/2015
42
Pseudo-classe dinâmica “sobre o
elemento” (E:hover)
Casamento com um elemento cujo
mouse está sobre ele;
No IE6 funciona o a:hover!
ie6
05/11/2015
43
Significado: quando o mouse
passar sobre um link (tag <a>),
troque o fundo para vermelho e
elimine qualquer tipo de
sublinhado
05/11/2015
44
05/11/2015
45
05/11/2015
46
Ordem correta de aplicação das
pseudo-classes de link
Link, Visited, Hover, Active;
Mnemônico: LoVeHAte;
05/11/2015
47
Pseudo-classe dinâmica foco
(E:focus)
Casamento com elemento que está com
o foco para digitação;
Não funciona no IE7.
ie7
05/11/2015
48
Significado: quando o usuário
estiver com o foco de teclado em
uma área de texto qualquer,
troque o fundo da área para
vermelho
05/11/2015
49
05/11/2015
50
Ordem correta de aplicação das
pseudo-classes de link (com
focus)
Link, Visited, Hover,
Focus, Active;
Ver mais detalhes em:
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-thelink-states/
05/11/2015
51
Pseudo-classe primeiro filho
(E:first-child)
Casamento com um elemento quando
ele é o primeiro filho de seu pai;
05/11/2015
52
Significado: muda para vermelho
a cor de fundo de todos os <li>
que são o primeiro filho de seu
elemento pai
05/11/2015
53
05/11/2015
54
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
05/11/2015
55
Significado: mudar para
vermelho a cor de fundo de
todos os elementos da língua
Português e suas variantes
05/11/2015
56
05/11/2015
57
Pseudo-elemento de conteúdo
inserido antes de outro (:before)
Gera conteúdo antes do elemento
especificado através da propriedade
content;
Comportamento complexo, mas
poderoso;
Não funciona no IE7.
05/11/2015
ie7
58
Significado: Coloca o texto “Pais: “
antes de todos os parágrafos.
05/11/2015
59
05/11/2015
60
Pseudo-elemento de conteúdo
inserido depois de outro (:after)
Gera conteúdo depois do elemento
especificado;
Não funciona no IE7;
ie7
05/11/2015
61
Significado: Coloca o texto
indicado após todos os
parágrafos.
05/11/2015
62
05/11/2015
63
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-p
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
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.
05/11/2015
78
05/11/2015
79
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
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/selet
ores_css21_parte1.php
Recomendação W3C do CSS 2.1 (em
Inglês):
– http://www.w3.org/TR/CSS21/selecto
r.html#pattern-matching
05/11/2015
83
Material referente ao assunto da
aula
Capítulo do Livro CSS – Guia de Bolso:
– http://altabooks.tempsite.ws/capitulo
s_amostra/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
05/11/2015
84
Material referente ao assunto da
aula
CSS – Guia de
Bolso;
– Editora AltaBooks;
– 2008;
– Download de um
capítulo.
05/11/2015
85
Próximas aulas de CSS
Seletores CSS 3.0;
Textos e Fontes;
05/11/2015
86