Pseudoclasses CSS

Índice

    Mostrar índice

O que são pseudoclasses?

Uma pseudoclasse é usada para definir um estado especial de um elemento.

Por exemplo, pode ser usado para:

  • Estilizar um elemento quando um usuário passa o mouse sobre ele

  • Estilize links visitados e não visitados de maneira diferente

  • Estilize um elemento quando ele receber foco

Mouse Over Me

Sintaxe

A sintaxe das pseudoclasses:

selector:pseudo-class {
  property: value;
}

Pseudoclasses âncora

Os links podem ser exibidos de diferentes maneiras:

Exemplo

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Observação: a:hover DEVE vir depois de a:link e a:visited na definição CSS para ser eficaz! a:active DEVE vir depois a:hover na definição CSS para ser eficaz! Nomes de pseudoclasses não diferenciam maiúsculas de minúsculas.

Pseudoclasses e classes HTML

Pseudoclasses podem ser combinadas com classes HTML:

Quando você passa o mouse sobre o link do exemplo, ele muda de cor:

Exemplo

a.highlight:hover {
  color: #ff0000;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

Passe o mouse sobre <div>

Um exemplo de uso da pseudoclasse :hover em um elemento <div>:

Exemplo

div:hover {
  background-color: blue;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

Passar a dica de ferramenta simples

Passe o mouse sobre um elemento <div> para mostrar um elemento <p> (como uma dica de ferramenta):

Tada! Aqui estou!

Exemplo

p {
  display: none;
  
background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

CSS - A pseudoclasse :first-child

A pseudoclasse :first-child corresponde a um elemento especificado que é o primeiro filho de outro elemento.

Combine o primeiro elemento <p>

No exemplo a seguir, o seletor corresponde a qualquer elemento <p> que seja o primeiro filho de qualquer elemento:

Exemplo

p:first-child
{
   
color: blue;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>

Combine o primeiro elemento <i> em todos os elementos <p>

No exemplo a seguir, o seletor corresponde ao primeiro elemento <i> em todos os elementos <p>:

Exemplo

p i:first-child
{
   
color: blue;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

Combine todos os elementos <i> em todos os primeiros elementos <p> filhos

No exemplo a seguir, o seletor corresponde a todos os elementos <i> nos elementos <p> que são o primeiro filho de outro elemento:

Exemplo

p:first-child i
{
  color: blue;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

CSS - A pseudo-classe :lang

A pseudoclasse :lang permite definir regras especiais para diferentes idiomas.

No exemplo abaixo, :lang define as aspas para elementos com lang="no":

Exemplo

<html>
<head>
<style>
  q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

Mais exemplos

Adicione estilos diferentes aos hiperlinks

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

Uso de: foco

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Todas as pseudoclasses CSS

:active

Exemplo:

a:active

Descrição de exemplo:

Seleciona o link ativo

:checked

Exemplo:

input:checked

Descrição de exemplo:

Seleciona todos os elementos <input> verificados

:disabled

Exemplo:

input:disabled

Descrição de exemplo:

Seleciona todos os elementos <input> desabilitados

:empty

Exemplo:

p:empty

Descrição de exemplo:

Seleciona todo elemento <p> que não possui filhos

:enabled

Exemplo:

input:enabled

Descrição de exemplo:

Seleciona todos os elementos <input> habilitados

:first-child

Exemplo:

p:first-child

Descrição de exemplo:

Seleciona todos os elementos <p> que são o primeiro filho de seu pai

:first-of-type

Exemplo:

p:first-of-type

Descrição de exemplo:

Seleciona cada elemento <p> que é o primeiro elemento <p> de seu pai

:focus

Exemplo:

input:focus

Descrição de exemplo:

Seleciona o elemento <input> que está em foco

:hover

Exemplo:

a:hover

Descrição de exemplo:

Seleciona links ao passar o mouse

:in-range

Exemplo:

input:in-range

Descrição de exemplo:

Seleciona elementos <input> com um valor dentro de um intervalo especificado

:invalid

Exemplo:

input:invalid

Descrição de exemplo:

Seleciona todos os elementos <input> com um valor inválido

:lang(language)

Exemplo:

p:lang(it)

Descrição de exemplo:

Seleciona cada elemento <p> com um valor de atributo lang começando com "it"

:last-child

Exemplo:

p:last-child

Descrição de exemplo:

Seleciona todos os elementos <p> que são o último filho de seu pai

:last-of-type

Exemplo:

p:last-of-type

Descrição de exemplo:

Seleciona cada elemento <p> que é o último elemento <p> de seu pai

:link

Exemplo:

a:link

Descrição de exemplo:

Seleciona todos os links não visitados

:not(selector)

Exemplo:

:not(p)

Descrição de exemplo:

Seleciona todos os elementos que não são um elemento <p>

:nth-child(n)

Exemplo:

p:nth-child(2)

Descrição de exemplo:

Seleciona cada elemento <p> que é o segundo filho de seu pai

:nth-last-child(n)

Exemplo:

p:nth-last-child(2)

Descrição de exemplo:

Seleciona cada elemento <p> que é o segundo filho de seu pai, contando a partir do último filho

:nth-last-of-type(n)

Exemplo:

p:nth-last-of-type(2)

Descrição de exemplo:

Seleciona cada elemento <p> que é o segundo elemento <p> de seu pai, contando a partir do último filho

:nth-of-type(n)

Exemplo:

p:nth-of-type(2)

Descrição de exemplo:

Seleciona cada elemento <p> que é o segundo elemento <p> de seu pai

:only-of-type

Exemplo:

p:only-of-type

Descrição de exemplo:

Seleciona todo elemento <p> que é o único elemento <p> de seu pai

:only-child

Exemplo:

p:only-child

Descrição de exemplo:

Seleciona todo elemento <p> que é filho único de seu pai

:optional

Exemplo:

input:optional

Descrição de exemplo:

Seleciona elementos <input> sem nenhum atributo "obrigatório"

:out-of-range

Exemplo:

input:out-of-range

Descrição de exemplo:

Seleciona elementos <input> com um valor fora de um intervalo especificado

:read-only

Exemplo:

input:read-only

Descrição de exemplo:

Seleciona elementos <input> com um atributo "readonly" especificado

:read-write

Exemplo:

input:read-write

Descrição de exemplo:

Seleciona elementos <input> sem atributo "somente leitura"

:required

Exemplo:

input:required

Descrição de exemplo:

Seleciona elementos <input> com um atributo "obrigatório" especificado

:root

Exemplo:

root

Descrição de exemplo:

Seleciona o elemento raiz do documento

:target

Exemplo:

#news:target

Descrição de exemplo:

Seleciona o elemento #news ativo atual (clicado em uma URL que contém esse nome de âncora)

:valid

Exemplo:

input:valid

Descrição de exemplo:

Seleciona todos os elementos <input> com um valor válido

:visited

Exemplo:

a:visited

Descrição de exemplo:

Seleciona todos os links visitados

Todos os pseudoelementos CSS

::after

Exemplo:

p::after

Descrição de exemplo:

Insira conteúdo após cada elemento <p>

::before

Exemplo:

p::before

Descrição de exemplo:

Insira conteúdo antes de cada elemento <p>

::first-letter

Exemplo:

p::first-letter

Descrição de exemplo:

Seleciona a primeira letra de cada elemento <p>

::first-line

Exemplo:

p::first-line

Descrição de exemplo:

Seleciona a primeira linha de cada elemento <p>

::marker

Exemplo:

::marker

Descrição de exemplo:

Seleciona os marcadores dos itens da lista

::selection

Exemplo:

p::selection

Descrição de exemplo:

Seleciona a parte de um elemento que é selecionado por um usuário