Campo de busca

Categoria Front-End

CSS
Pseudo classes

Pseudo classes

Por | 08 de agosto, 2013 | 0 comentários

Sem dúvida os seletores fazem parte dos assuntos fundamentais do CSS, contudo poucos desenvolvedores sabem tirar proveito de todo o seu potencial. As pseudo classes são bem pouco exploradas pelos desenvolvedores Front-End, seja por falta de conhecimento destas funções do CSS ou incompatibilidade com o IE.

Os seletores mais básicos do CSS, e sua forma de declaração e qual a sua função dentro do CSS

Universal *
Aplica o estilo a todos os elementos da pagina, muito utilizado em técnicas de Reset CSS.
Tipo E
Aplica o estilo ao elemento E.
Classe .conteudo
Aplica o estilo a todos os elementos que contem a class "conteudo"(class="conteudo".
ID #footer
Aplica o estilo em qualquer elemento cuja id seja footer.
Descendente E F
Aplica o estilo em qualquer elemento F que seja descendente do elemento E.
Filho E > F
Aplica o estilo em qualquer elemento F que seja filho do elemento E.
Adjacente E + F
Aplica o estilo em qualquer elemento F que se segue imediatamente a E.

Com os Pseudo elementos e Pseudo classes é possível deixar o seu código HTML mais limpo, retirando os famosos <span> e evitar a criação de varias class ou IDs para aplicar o estilo em um único elemento.

As pseudo-classes podem estar relacionas a todos os elementos, porem existem alguns específicos para cada tipo:

Atributos do <a>

:link
Seleciona todos os links que contem o href definido.
:visited
Aplica o estilo para os links visitados do seu site, como por exemplo a busca do google que aplica uma cor mais escura aos links que você já visitou
:hover
Aplica os atributos ao passar o mouse por cima do elemento
:active
Aplica o estilo no momento do click.

Atributos de Formulários

:focus
Aplica o estilo no elemento que está em foco no momento, por exemplo ao clicar em um campo do formulário
:target
Aplica o estilo no item que está selecionado no href, como por exemplo uma ancora para uma determinada área do site, a mesma ira receber os atributos
:enabled
Aplica o estilo no campos que estão prontos para uso
:disabled
Aplica o estilo nos campos que estão desabilitados
:checked
Aplica o estilo no check-box selecionado

Atributos para Texto

:first-letter
Coloca a primeira letra do texto em evidencia, aparentando um efeito de jornal;
:first-line
Aplica o estilo apenas na primeira linha do texto do elemento.
::selection
Aplica o estilo ao selecionar o texto, por exemplo os navegadores por padrão colocam a seleção na cor azul, essa cor pode ser alterada pra qualquer outra.

Atributos de posicionamento, os mais importantes!!

:first-child
Seleciona o primeiro elemento de uma determinada tag dentro do elemento pai.
:last-child
Seleciona o ultimo elemento de uma determinada tag dentro do elemento pai.
:nth-child(N)
Seleciona o elemento que quiser, no lugar do (N), basta colocar o numero correspondente do elemento, por exemplo:
:nth-child(even) e :nth-child(odd)
Aplica o efeito alternado(zebra) nas tabelas.

Para selecionarmos o segundo elemento o CSS ficaria dessa forma:

ul li:nth-child(2){
	font-size:20px;
}


  • Item 1
  • Item 2
  • Item 3

Como nem todos os atributos funcionam no Internet Explorer, existem plugins que "forçam" o IE a aceitar essas Pseudo Classes, como o Selectivizr

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[0] Comentários  

Nenhum comentário em "Pseudo classes". Seja o primeiro a comentar!