Laboratório de InformáticaCSS SeletoresSeletores do CSS 2.1

1º Semestre 2010 > PUCPR > BSI

Bruno C. de PaulaBruno C. de Paula

Resumo da aulaContinuaremos 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 aulaTutorial sobre regras CSS:

http://maujor.com/tutorial/sintaxetut.php

Tutorial seletores CSS 2.1:http://maujor.com/tutorial/seletores_c

ss21_parte1.phpRecomendação W3C do CSS 2.1 (em

Inglês):http://www.w3.org/TR/CSS21/selector.

html#pattern-matching

Material referente ao assunto da aula

Capítulo do Livro CSS – Guia de Bolso:http://altabooks.tempsite.ws/capitulos

_amostra/00_cssbolso.pdfTabela 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/en-us/librar

y/aa358816(VS.85).aspx

4

Material referente ao assunto da aula

CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um

capítulo.

5

6

Tags HTML referenciadas na aula (em Português –site Referenciando)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.

7

Tags HTML referenciadas na aula (em Inglês – site SitePoint)

Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;

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)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).

9

Seletores CSS referenciados na aula – Seletores de AtributoSeletor de elemento com

atributo existente (existência):E[atr];

Seletor de elemento com valor de atributo igual ao valor especificado (igualdade):E[atr=val].

10

Seletores CSS referenciados na aula – Seletores de AtributoSeletor 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].

11

Relembrando a aula passada...

12

13

Versões do CSS1.0: Todos os navegadores do

mercado implementam.

14

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);

15

16

Fonte da imagem: CSS Guia de Bolso de Eric A. Meyer

Assunto de hoje: só seletores!E do CSS 2.1

17

Os seletores do CSS 2.1 são implementados por todas as plataformas principais (menos IE6)!

18

19

Use com cuidado!ie6

CSS 2.1 funciona bem no IE8 e IE9!

20

Tabela de compatibilidade CSS 2.1 x Navegadores

21

Fonte: fonte: http://kimblim.dk/css-tests/selectors/

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;

22

“Transformação” de ie5.5 para IE923

<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->

Lista dos Seletores do CSS 2.1

24

2511/04/23

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 ie7

2611/04/23

Seletor Tipo Observações

E:first-child Primeiro filho

E:lang(C) Idioma

E:before Inserção de conteúdo antes

E:after Inserção de conteúdo depois

ie7

ie7

ie7

2711/04/23

Seletor Tipo Observações

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

Seletor universal (*)

Casamento com elemento de qualquer tipo;

28

11/04/23

Significado: coloque a cor amarela e o fundo azul em todos os elementos dentro de um div, independente do tipo

29

30

CSS Reset31

* {margin: 0;padding: 0;}Elimina margens e espaçamentos padrão de todos os elementos

Localização / Depuração de elementos CSS

32

Seletor filho (E > F)

Casamento com todos os elementos filhos imediatos de um elemento;

Diferente do seletor descendente!

33

Significado: deixar em verde e com fonte grande todos os <em> filhos imediatos de um div

34

35

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);

36

Significado: trocar o fundo de todos os parágrafos imediatamente colocados após um elemento <h2>

37

Significado: sublinhar todos os parágrafos depois de um parágrafo, ou seja, em uma lista de parágrafos, formatar todos menos o 1º

38

39

Pseudo-classe dinâmica “sobre o elemento” (E:hover)Casamento com um elemento cujo

mouse está sobre ele;No IE6 funciona o a:hover!

40

ie6

Significado: quando o mouse passar sobre um link (tag <a>), troque o fundo para vermelho e elimine qualquer tipo de sublinhado

41

42

43

Ordem correta de aplicação das pseudo-classes de linkLink, Visited, Hover, Active;Mnemônico: LoVeHAte;Se considerar o focus: LoVe Fears

HAte;

44

Pseudo-classe dinâmica foco (E:focus)Casamento com elemento que está com

o foco para digitação;Não funciona no IE7.

45

ie7

Significado: quando o usuário estiver com o foco de teclado em uma área de texto qualquer, troque o fundo da área para vermelho

46

47

Ordem correta de aplicação das pseudo-classes de link (com focus)

Link, Visited, Hover, Focus, Active;

48

11/04/23

Ver mais detalhes em: http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/

Pseudo-classe primeiro filho (E:first-child)Casamento com um elemento quando

ele é o primeiro filho de seu pai;

49

Significado: muda para vermelho a cor de fundo de todos os <li> que são o primeiro filho de seu elemento pai

50

51

Pseudo-classe idioma (E:lang(C))

Seleciona o elemento com o idioma indicado;

Para especificar o idioma, usar atributo lang.

Não funciona ie7.

52

ie7

Significado: mudar para vermelho a cor de fundo de todos os elementos da língua Português e suas variantes

53

54

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.

55

11/04/23

ie7

Significado: Coloca o texto “Pais: “ antes de todos os parágrafos.

56

57

Pseudo-elemento de conteúdo inserido depois de outro (:after)Gera conteúdo depois do elemento

especificado;Não funciona no IE7;

58

ie7

Significado: Coloca o texto indicado após todos os parágrafos.

59

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 tagPara 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 nofollowPara 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.phpTutorial 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

Material referente ao assunto da aula

Capítulo do Livro CSS – Guia de Bolso:http://altabooks.tempsite.ws/

capitulos_amostra/00_cssbolso.pdfTabela 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/en-us/

library/aa358816(VS.85).aspx

81

Material referente ao assunto da aula82

CSS – Guia de Bolso;Editora AltaBooks;2008;Download de um

capítulo.