Bruno C. de Paula
Laboratório de Informática
CSS Seletores
Seletores do CSS 1.0
1º Semestre 2010 > PUCPR > BSI
Resumo da aula
Para
que a ligação do CSS seja feita com os
elementos de uma página HTML será necessário
o conhecimento da linguagem de seletores;
Tal linguagem será útil não apenas no trabalho
com CSS, mas também permitirá a alteração
do comportamento de elementos em
JavaScript;
Hoje trabalharemos com os seletores
introduzidos do CSS 1.0;
3
Material referente ao assunto da aula
 Tutorial
sobre regras CSS:
http://maujor.com/tutorial/sintaxetut.php
 Recomendação W3C do CSS 1.0:
http://www.maujor.com/tutorialcss1/css1tu
t.shtml
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/
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 de Elemento;
 Seletor de Classe (.);
 Seletor de Id (#);
 Agrupamento de seletores (,);
 Seletor contextual (descendente);
 Pseudo-classe âncora (:link, :visited, :active);
 Pseudo-elemento letra inicial (:first-letter);
 Pseudo-elemento linha inicial (:first-line);

9
Anteriormente em nossa 1ª aula...
10
11
Separação
entre camadas
 HTML:
Conteúdo;
Dados e estrutura;
 CSS:
Apresentação;
Formatação, layout, cores, fontes,
posicionamento.
 JavaScript:
Comportamentos;
Programação.
12
13
14
Relembrando CSS...
15
16
Versões do CSS
 1.0: Todos os navegadores do
mercado implementam. Aula de
hoje;
17
Versões do CSS (retrocompatíveis)
 2.0/2.1:
Implementado em grande parte dos
navegadores (implementação parcial: ie6 e
ie7);
 3.0:
Em discussão, implementação parcial
em alguns navegadores (Opera, Firefox,
Safari, Chrome);
18
Folha de estilo = Regras CSS
 Coleção
de regras;
 No exemplo abaixo, temos 2 regras;
19
Regra CSS
 Alterar
05/11/2015
todos os <h1> para a cor azul:
20
Regra = Seletor + Declaração
<style type="text/css">
h1 {
color:blue;
}
</style>
Declaração = Propriedade + Valor de
Propriedade
21
<style type="text/css">
h1 {
color:blue;
}
</style>
05/11/2015
Regra = Seletor + Propriedade +
Valor de Propriedade
<style type="text/css">
h1 {
color:blue;
}
</style>
05/11/2015
22
Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer
23
Aula de hoje: só seletores!
E do CSS 1.0
24
25
Seletores não são
exclusivos do CSS
26
Seletores em JavaScript
 Exemplo
usando a biblioteca jQuery;
 Usaremos a versão do jQuery hospedada no
CDN do Google;
 CDN = Content Delivery Network;
 Ao clicar em qualquer parágrafo, exibe a
mensagem.
27
Os seletores do CSS 1.0
são implementados por
todas as plataformas
28
Use sem medo!
29
Lista dos Seletores do CSS 1.0
Seletor
Tipo
E
Elemento
.CLASSE
Classe
#ID
Id
E, F
Agrupamento de
seletores
Descendente
EF
05/11/2015
Observações
Cuidado com
classititis, dê
nomes
significativos
Tem que ser
único, dê nomes
significativos
30
Seletor
Tipo
Observações
a:link
Pseudo-classe link
LoVeHAte
a:visited
Pseudo-classe link
visitado
LoVeHAte
a:active
Pseudo-classe link
selecionado
LoVeHAte
:first-letter
Pseudo-elemento
primeira letra
:first-line
05/11/2015
Pseudo-elemento
primeira linha
ie6
ie6
31
32
Seletor Elemento (E)
 Casamento
E;
com um elemento (tag) qualquer
33
Significado: coloque a cor da letra de
todos os parágrafos (tag <p> com a
cor amarela (yellow) e fundo azul
(blue)
34
35
Seletor Classe (.E)
 Definem
conjuntos de
regras que
podem ser
aplicadas a
diferentes
elementos;
 Caractere .;
 Atributo class no
HTML.
36
Significado: trocar para cinza (#ccc)
a cor de fundo de todos os
elementos da classe c1, ou seja,
marcados com o atributo class=“c1”
37
Significado: trocar para vermelho
(red) a cor de todos os parágrafos
(tag <p>) cuja classe for igual a c1
38
39
“Classititis”
 Mania
de colocar classe em tudo;
 Doença comum em quem só sabe usar
ferramentas de edição visual para alterar
código CSS.
40
Seletor id (#E)
 Único
para alterar o
comportamento de
1 e apenas 1
elemento da
página;
 Útil em JavaScript;
 Caractere #;
 Atributo id do
HTML;
41
42
Significado: trocar para vermelho a
cor de fundo do elemento
identificado com o id “elemento1”
43
44
Nomes Ruins e Nomes Bons
 Ruim:
Vermelho
MenuEsquerda
Topo
 Bom:
Erro;
MenuPrincipal;
NavegacaoPrincipal.
45
Agrupamento de Seletores (E, F)
 Reduz
tamanho da folha de estilo;
 Evita repetição;
 Caractere ,;
 Aplica uma regra para mais de um seletor
simples;
46
Significado: trocar para vermelho o
fundo do elemento com id igual a
elemento1 E de todos os elementos
da classe c1.
47
48
Seletor Contextual (E F)
Seletor Descendente
 Seleciona
o elemento F que é descendente
de outro elemento E;
 Ou seja, o seletor F deve estar dentro de E.
49
Significado: trocar para azul todos os
elementos <em> que são
descendentes de um parágrafo <p>.
Ou seja, <em> que estão dentro de
<p>;
50
Pseudo-classe âncora
(a:link)
 Usado
para definir
um estilo a um
link no seu
estado inicial;
 Exclusivo para
links;
 Caractere : e
pseudo-classe
link.
51
52
Significado: Aumentar a letra de
todos os links (font-size: xx-large) e
colocar a cor vermelha (red)
53
Significado: diminuir a letra de todos
os links que estão dentro de um
parágrafo e alterar a cor para verde
54
Significado: alterar a fonte e a cor de
todos os links que forem da classe c1
55
56
Pseudo-classe âncora
(a:visited)
 Usado
para definir
um estilo a um link
após ser visitado;
 Exclusivo para links;
 Caractere : e
pseudo-classe
visited.
57
Significado: alterar a fonte e a cor
dos links visitados.
58
59
Clique!
Pseudo-classe âncora
(a:active)
 Usado
para definir
um estilo a um link
ativo (sendo
selecionado);
 Exclusivo para links;
 Caractere : e pseudoclasse active.
60
61
Significado: alterar a cor e a fonte do
link sendo clicado.
62
63
Clique!
Solta!
Ordem correta de aplicação das
pseudo-classes de link
Link,
Visited, Hover, Active;
Mnemônico: LoVeHAte / LoVe
Fears HAte;
Hover e Focus: CSS 2.1
64
Pseudo-elemento tipográfico de letra
inicial (:first-letter)
65
 Define
o estilo para a
primeira letra de
um elemento;
 Pode ser aplicado em
qualquer elemento;
 Caractere : e pseudoelemento firstletter.
ie6
66
Significado: alterar a cor e o
tamanho da primeira letra de todos
os parágrafos
67
Pseudo-elemento tipográfico de
primeira linha (:first-line)
68
 Define
o estilo para a
primeira linha de
um elemento;
 Pode ser aplicado em
qualquer elemento;
 Caractere : e pseudoelemento first-line.
ie6
69
Significado: fazer com que o fundo
da primeira linha visualizada fique da
cor verde
70
71
Material referente ao assunto da aula
 Tutorial
sobre regras CSS:
http://maujor.com/tutorial/sintaxetut.php
 Recomendação W3C do CSS 1.0:
http://www.maujor.com/tutorialcss1/css1tu
t.shtml
72
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/
73
Material referente ao assunto da aula
 CSS
– Guia de Bolso;
Editora AltaBooks;
2008;
Download de um
capítulo.