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

Adição e subtração de paths no Photoshop CS4