Tutorial Anterior Da Série Aprende CSS Com Maicon Sobczak > CSS – Diferença Entre Browsers
Entraram nas especificaçõe do CSS3 importantes seletores. Alguns já eram usados, mas sem uma padronização.
Agora o controle sobre a estilização fica mais refinado e enxuto. É possível até criar pequenas formulas para selecionar elementos muito específicos.
Veremos neste tutorial como selecionar elementos baseados em atributos, localização na árvore da página, que com certeza é o que mais oferece opções, estilização de formulário, um grande avanço entre outros.
Mas o navegador da Microsoft oferece suporte apenas para seletores de atributo. Quanto aos outros navegadores modernos, todos oferecem suporte total em suas últimas versões.
Seletores
Os seletores servem para que você possa alterar a aparência dos elementos referenciando a representação da realidade HTML dele, como h1, ou através dos atributos e valores destes.
Nem todos são novidade, mas agora finalmente fazem parte das especificações do CSS3.
Por atributo
Estes selecionam baseados no valor do atributo:
[att^=”valor”] – O valor do atributo inicia com “valor”.
a[title^=”noticia”]
[att$=”valor”] – O valor atribuído termina com “valor”. Pode ser apenas um fragmento da palavra.
a[title$=”cia”]
[att*=”valor”] – O valor atribuído contém o fragmento.
a[title$=” ici”]
O valor do atributo diferencia maiúsculas e minúsculas. Inclusive o IE7 e 8 aceitam esta forma de seleção.
Seletores combinados
Para aplicar borda em todas as imagens que dividam o mesmo elemento pai que uma div com a classe .fotos agora basta usar:
.fotos~img{border:1px solid #00ff00;}
Para os desatentos, o truque é o til (~). Ele conecta os irmãos.
Pseudo-classes
Selecionar elementos baseado na localização ou estado destes tornou-se mais fácil com novas pseudo classes.
nth-child
Algumas são complexas, como a nth-child, que permite estilizar um elemento em determinada posição, podendo-se usar para encontrar a localização, até uma fórmula. Um exemplo? Claro, vários.
ul li:nth-child(2){color:#00ff00;} /* Seleciona o segundo item da lista */
ul li:nth-child(-n+3){color:#00ff00;} /* Seleciona os três primeiros itens */
ul li:nth-child(4n+1){color:#00ff00;}/* A cada três itens o quarto tem a cor do texto verde */
Para criar tabelas listradas, adicione even e odd entre os parênteses.
tr:nth-child(odd){background-color:#00ff00;}
tr:nth-child(even){background-color:#ff0000;}
nth-last-child
Com o nth-last-child a contagem começa de trás para frente. Para estilizar os três últimos parágrafos existentes na div, o código fica:
div p:nth-last-child(-n+3){background:#060;}
div p:nth-last-child(3){background:#060;} /* Somente o terceiro de baixo para cima */
nth-of-type
O nth-of-type encontra elementos do mesmo tipo descendentes do mesmo pai. Como diversos parágrafos dentro de uma div.
.textos>p:nth-of-type(3n+1){background:#96C;}
A cada dois parágrafos, o terceiro tem o fundo lilás. Enquanto o nth-child faz uma contagem corrida dos elementos, este procura por específicos. Somente do tipo (of-type). Se entre os parágrafos houver tabelas, ela não entra na contagem, somente parágrafos.
first-of-type e last-of-type
Com o first-of-type é estilizado apenas o primeiro elemento filho do tipo. O last-of-type seleciona o último do tipo. Para que a primeira imagem da div tenha borda vermelha e a última borda preta escrevemos:
div img:first-of-type{border:10px solid #F00;}
div img:last-of-type{border:10px solid #000;}
O nth-last-of-type faz o mesmo trabalho que o nth-last-child, mas antes procura elementos específicos. As últimas três do texto com borda vermelha:
div img:nth-last-of-type(-n+3){border:10px solid #F00;}
only-of-type
A pseudo-classe only-of-type seleciona o elemento que é o único filho do tipo. Se você tem um layout que apresenta no conteúdo número variável de imagens e deseja estilizar de maneira diferente quando houver apenas uma imagem pode fazer assim:
.texto img:only-of-type{border:2px solid #F00;}
Se houver mais de uma imagem na div “texto” não será aplicada a borda vermelha.
Para não restar dúvidas: o nth-child, nth-last-child aplicam o estilo baseados na posição não importando quais elementos estão incluídos na contagem. Já os seletores que tem o of-type, contam apenas os elementos do tipo especificado.
last-child
O last-child seleciona o último elemento. Uma alternativa a ele é usar o :nth-last-child(1).
Para estilizar elementos do formulário como checkboxes ao serem selecionadas chegou a :checked. Ela altera a aparência do quadrado ou círculo. Um fundo azul quando for selecionado:
input[name=elemento]:checked{background:#00F;}
empty
O :empty estiliza um elemento que não tenha filhos ou esteja vazio. Infelizmente não pode ser usado em elementos que recebem conteúdo dinamicamente porque, no Firefox a estilização será como se o elemento ainda estivesse vazio.
enabled, disabled e not
Elementos habilitados são os que podem ser selecionados, receber textos, caso dos campos de um formulário, receber o foco ou ser clicado. O :enable estiliza o elemento que pode receber as ações listadas acima. Útil principalmente em formulários.
input:enabled{border:1px solid #F00;}
Todos os inputs do formulário terão borda vermelha e no Opera 10 até o checkbox entra na dança. O :enable também seleciona os submits. O que não é bom se você deseja criar um botão com aparência diferente dos outros itens do formulário. Mas não precisa criar uma classe ou outra declaração para o submit, basta usar a pseudo-classe :not.
input:enabled:not([type="submit"]){border:1px solid #F00;}
Todos os inputs terão borda vermelha menos o do tipo submit. Uma expressão refinada e de incrível utilidade! O :not aceita outros seletores como tabelas, parágrafos e até mesmo classes.
Para que o :not funcione corretamente cuide para utilizar colchetes quando o seletor tiver aspas no caso de type=”submit”. Se for classe ou elemento, bastam os parênteses.
Para selecionar os campos do formulário que estão desabilitados use :disabled.
target
Para navegar dentro de uma mesma página criamos as ancoras e atribuímos nome a elas. Desta forma para um link levar à determinada seção da página incluímos a tralha (#) e o nome da seção.
O :target permite estilizar a seção da página para a qual o link clicado leva.
Ao clicar no link que leva à div “destino”, esta ficará com a cor do fundo azul. Se o link de baixo for clicado, a div “outra” é que ficará com o fundo azul.
Pseudo Elementos
Ao selecionar um texto clicando e arrastando a seta do mouse o fundo fica azul ou no caso do IE8 preto. O único pseudo elemento oferecido pelo CSS3 permite alterar o fundo e a cor dos textos selecionados. O que possibilita maior controle e unidade do design.
O responsável por isso é o ::selection. Para que funcione no Firefox, é necessário adicionar o prefixo –moz-:
p::selection {background:#F93; color: #FFF;}
p::-moz-selection {background:#F93; color: #FFF;}
Os textos de parágrafo selecionados terão fundo alaranjado e texto branco. Se você quer que inclusive links e cabeçalhos sejam estilizados, adicione o asterisco na frente.
h1, a, p::selection {background:#F93; color: #FFF;}
*::-moz-selection {background:#F93; color: #FFF;}
Os elementos do formulário não são afetados por este pseudo elemento.
Conclusão
Como dito no início do tutorial, somente os navegadores mais avançados oferecem suporte ao CSS3, exceto IE8. Então é importante não depender disso para que a página funciona, já que é uma parcela pequena dos usuários que mantém os navegadores atualizados.
Em contra partida, quem tem navegador atualizado pode ser presenteado com um design único. Até porque você já pode usar todos os seletores pensando no suporte futuro.
Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > Especial! CSS3 – Efeitos Em Textos
