Usando Pseudoclasses

As pseudoclasses são uma maneira de referenciar elementos que tenham uma característica em particular.

Usamos dois pontos (:) para delimitar o início de um seletor de pseudoclasse. Vamos ver alguns exemplos:

A pseudoclasse :link referencia qualquer elemento que seja um hiperlink.

a:link{ color:blue;}

A pseudoclasse :visited leva esse conceito a um passo adinte e referencia hiperlinks que tenham sido visitados:

a:visited{ color:red;}

Existem um grupo de pseudoclasses chamadas de pseudoclasses dinâmicas porque se aplicam a elementos com os quais o usuário tenha interagido de alguma forma.

Temos, então a pseudoclasse :hover que referencia elementos desenhados sobre os quais o cursor esteja parado.

A pseudoclasse :active que referencia elementos que estejam ativos, ou seja, quando o usuário clica em um hiperlink, mas ainda não soltou o botão do mouse.

Outro exemplo que podemos usar é a pseudoclasse :focus para referenciar o elemento da página que esteja focalizado. Um exemplo prático é quando queremos projetar interfaces de formulários em que estilizamos os itens do formulário de forma diferente.

.form:focus{background-color:#F30;}















Temos, ainda, as pseudoclasses :first-child ou last-child, na qual podemos selecionar a primeira ou a última ocorrência de um elemento, para estilizar de forma diferente cada um deles.

Por exemplo uma lista de navegação. Observe o código:
 










Temos um ID para a lista, aonde podemos estilizar seu primeiro e último elemento. Veja como ficaria a CSS:

#nav :first-child{background-color:#F30;}

#nav :last-child{background-color:#F30;}

Estes são alguns exemplos que podem ser úteis na construção de páginas para web... Boa Sorte!

Comentários

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Letras entrelaçadas no Photoshop CS4