Laboratório de Informática CSS Seletores Seletores do CSS 2.1 1º Semestre 2010 > PUCPR > BSI Bruno C. de Paula

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: Tutorial seletores CSS 2.1: _css21_parte1.php _css21_parte1.php Recomendação W3C do CSS 2.1 (em Inglês): #pattern-matching #pattern-matching

Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: stra/00_cssbolso.pdf stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: Documentação sobre seletores do site da Microsoft: us/library/aa358816(VS.85).aspx us/library/aa358816(VS.85).aspx 4

Material referente ao assunto da aula CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo 5

6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

7 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

8 Seletores CSS referenciados na aula (em Inglês –site SitePoint)SitePoint Seletor universal (*);* Seletor filho (E > F);> Seletor irmão adjacente (E + F);+ Pseudo-classe dinâmica sobre o elemento (E:hover);:hover Pseudo-classe dinâmica foco (E:focus);:focus

Seletores CSS referenciados na aula (em Inglês –site SitePoint)SitePoint Pseudo-classe primeiro filho (E:first-child);:first-child Pseudo-classe idioma (E:lang(c));:lang Pseudo-elemento de conteúdo inserido antes de outro (E:before);:before Pseudo-elemento de conteúdo inserido depois de outro (:after).:after 9

Seletores CSS referenciados na aula – Seletores de Atributo Seletor de elemento com atributo existente (existência): E[atr]; E[atr] Seletor de elemento com valor de atributo igual ao valor especificado (igualdade): E[atr=val]. E[atr=val] 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]. E[atr|=val] 11

Relembrando a aula passada... 12

13

Versões do CSS 1.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

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:

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; Emular alguns recursos do CSS 2.1 via JavaScript 22

Transformação de ie5.5 para IE9 23

Lista dos Seletores do CSS

2513/1/2014 SeletorTipoObservações *Universal* Uso em CSS Reset * Funciona no ie6 E > FFilho E + FIrmão adjacente E:hoverHover (mouse sobre) No ie6 só a:hover funciona! E:focusFoco no tecladoForms e links ie7

2613/1/2014 SeletorTipoObservações E:first-childPrimeiro filho E:lang(C)Idioma E:beforeInserção de conteúdo antes E:afterInserção de conteúdo depois ie7

2713/1/2014 SeletorTipoObservaçõ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 prefixoUsar com tag a e atributo hreflang

Seletor universal (*) Casamento com elemento de qualquer tipo; 28 13/1/2014

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

30

CSS Reset 31 * { 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 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 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 ), troque o fundo para vermelho e elimine qualquer tipo de sublinhado 41

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) 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 13/1/2014 Ver mais detalhes em: link-states/ 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 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;da propriedade content Comportamento complexo, mas poderoso; Comportamento complexo Não funciona no IE /1/2014 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 tag Para mais detalhes sobre o significado de rel=tag, acesse o link:

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:

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).atributo hreflang 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: Tutorial seletores CSS 2.1: _css21_parte1.php _css21_parte1.php Recomendação W3C do CSS 2.1 (em Inglês): #pattern-matching #pattern-matching

Material referente ao assunto da aula Capítulo do Livro CSS – Guia de Bolso: stra/00_cssbolso.pdf stra/00_cssbolso.pdf Tabela com resumo de todos os seletores do CSS e sua compatibilidade: Documentação sobre seletores do site da Microsoft: us/library/aa358816(VS.85).aspx us/library/aa358816(VS.85).aspx 81

Material referente ao assunto da aula 82 CSS – Guia de Bolso; Editora AltaBooks; 2008; Download de um capítulo. Download de um capítulo