Pseudo-classes e pseudo-elementos em CSS

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. Neste post veja pseudo-classes e pseudo-elementos em CSS.

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;
	}

Margens em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: css | Pseudo-classes | pseudo-elementos