CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Pseudo-classes e pseudo-elementos

Por Benedito Silva Júnior - publicado em 12/07/2016


No CSS, uma definição de estilo normalmente é associada a um elemento com base na posição que ele ocupa dentro da hierarquia do documento, o que geralmente é suficiente para a maioria das definições de estilos, mas não atendendo a alguns efeitos comuns.

O conceito de pseudo-classes e pseudo-elementos veio permitir que informações exteriores possam influenciar o processo de formatação do documento.

Pseudo-classes e pseudo-elementos podem ser utilizados como seletores em uma regra de definição de estilo, mas eles não existem fisicamente dentro de um documento HTML/XHTML. Eles são inseridos pelo navegador para serem utilizados como elos de ligação com as folhas de estilo.

As definições de pseudo-classes e pseudo-elementos são possíveis em folhas de estilo incorporadas ou externas, mas não em folhas de estilo locais.

Pseudo-classes

Permitem que as folhas de estilo diferenciem os diferentes estados de um elemento, sendo úteis para aplicar definições de estilo a um elemento apenas em determinadas situações:

:link - Especifica uma definição de estilo para um link, tag <a>, que ainda não foi visitado.

a:link {propriedade: valor}

:visited - Especifica uma definição de estilo para um link, tag <a>, que foi visitado recentemente.

a:visited {propriedade: valor}

:active - Especifica uma definição de estilo para um elemento que está ativado no momento, através do clique do mouse.

a:active {propriedade: valor}

:hover - Especifica uma definição de estilo para um elemento que está com o cursor do mouse sobre ele.

a:link {propriedade: valor}

Pseudo-elementos

São utilizados para especificar partes lógicas de um elemento, sem que essas partes estejam na hierarquia de elementos do documento.

:first-letter - Especifica uma definição de estilo a ser aplicada ao primeiro caracter do texto de um documento.
a:first-letter {propriedade: valor}

:first-line - Especifica uma definição de estilo a ser aplicada na primeira linha do texto de um documento.
a:first-line {propriedade: valor}

Exemplo:

/* efeito underline nos links */ a:hover { color:#FFF; text-decoration:underline !important; } /* links sem underline */ #conteudo a { text-decoration: none; color: #036; }


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo