Pseudoclases CSS

Tabla de contenido

    Mostrar tabla de contenidos

¿Qué son las pseudoclases?

Se utiliza una pseudoclase para definir un estado especial. de un elemento.

Por ejemplo, se puede utilizar para:

  • Aplicar estilo a un elemento cuando un usuario pasa el mouse sobre él

  • Diseñe los enlaces visitados y no visitados de manera diferente

  • Aplicar estilo a un elemento cuando recibe el foco

Mouse Over Me

Sintaxis

La sintaxis de pseudoclases:

selector:pseudo-class {
  property: value;
}

Pseudoclases de anclaje

Los enlaces se pueden mostrar de diferentes maneras:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Nota: a:hover DEBE venir después de a:link y a:visited en la definición CSS para que sea efectivo. a:active DEBE venir después a:hover en la definición CSS para que sea efectivo. Los nombres de pseudoclases no distinguen entre mayúsculas y minúsculas.

Pseudoclases y clases HTML

Las pseudoclases se pueden combinar con clases HTML:

Cuando pasas el cursor sobre el enlace en el ejemplo, cambiará de color:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Coloca el cursor sobre <div>

Un ejemplo del uso de la pseudoclase :hover en un elemento <div>:

Ejemplo

div:hover {
  background-color: blue;
}

Pruébelo usted mismo →

<!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>

Desplazamiento simple de información sobre herramientas

Pase el cursor sobre un elemento <div> para mostrar un elemento <p> (como una información sobre herramientas):

¡Tada! ¡Aquí estoy!

Ejemplo

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

div:hover p {
  display: block;
}

Pruébelo usted mismo →

<!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: la pseudoclase del primer hijo

La pseudoclase :first-child coincide con un elemento especificado que es el primer hijo de otro elemento.

Coincide con el primer elemento <p>

En el siguiente ejemplo, el selector coincide con cualquier elemento <p> que sea el primer hijo de cualquier elemento:

Ejemplo

p:first-child
{
   
color: blue;
}

Pruébelo usted mismo →

<!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>

Haga coincidir el primer elemento <i> en todos los elementos <p>

En el siguiente ejemplo, el selector coincide con el primer elemento <i> de todos los elementos <p>:

Ejemplo

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

Pruébelo usted mismo →

<!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>

Haga coincidir todos los elementos <i> en todos los primeros elementos secundarios <p>

En el siguiente ejemplo, el selector coincide con todos los elementos <i> en los elementos <p> que son el primer hijo de otro elemento:

Ejemplo

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

Pruébelo usted mismo →

<!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: la pseudoclase :lang

La pseudoclase :lang le permite definir reglas especiales para diferentes idiomas.

En el siguiente ejemplo, :lang define las comillas para los elementos con lang="no":

Ejemplo

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

Pruébelo usted mismo →

<!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>

Más ejemplos

Agregar diferentes estilos a los hipervínculos

<!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: enfoque

<!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 las pseudoclases de CSS

:active

Ejemplo:

a:active

Descripción de ejemplo:

Selecciona el enlace activo

:checked

Ejemplo:

input:checked

Descripción de ejemplo:

Selecciona cada elemento <input> marcado

:disabled

Ejemplo:

input:disabled

Descripción de ejemplo:

Selecciona cada elemento <input> deshabilitado

:empty

Ejemplo:

p:empty

Descripción de ejemplo:

Selecciona cada elemento <p> que no tiene hijos

:enabled

Ejemplo:

input:enabled

Descripción de ejemplo:

Selecciona cada elemento <input> habilitado

:first-child

Ejemplo:

p:first-child

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el primer hijo de su padre

:first-of-type

Ejemplo:

p:first-of-type

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el primer elemento <p> de su padre

:focus

Ejemplo:

input:focus

Descripción de ejemplo:

Selecciona el elemento <input> que tiene foco

:hover

Ejemplo:

a:hover

Descripción de ejemplo:

Selecciona enlaces al pasar el mouse sobre

:in-range

Ejemplo:

input:in-range

Descripción de ejemplo:

Selecciona elementos <input> con un valor dentro de un rango específico

:invalid

Ejemplo:

input:invalid

Descripción de ejemplo:

Selecciona todos los elementos <input> con un valor no válido

:lang(language)

Ejemplo:

p:lang(it)

Descripción de ejemplo:

Selecciona cada elemento <p> con un valor de atributo lang que comienza con "it"

:last-child

Ejemplo:

p:last-child

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el último hijo de su padre

:last-of-type

Ejemplo:

p:last-of-type

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el último elemento <p> de su padre

:link

Ejemplo:

a:link

Descripción de ejemplo:

Selecciona todos los enlaces no visitados

:not(selector)

Ejemplo:

:not(p)

Descripción de ejemplo:

Selecciona cada elemento que no sea un elemento <p>

:nth-child(n)

Ejemplo:

p:nth-child(2)

Descripción de ejemplo:

Selecciona cada elemento <p> que es el segundo hijo de su padre

:nth-last-child(n)

Ejemplo:

p:nth-last-child(2)

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el segundo hijo de su padre, contando desde el último hijo

:nth-last-of-type(n)

Ejemplo:

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

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el segundo elemento <p> de su padre, contando desde el último hijo

:nth-of-type(n)

Ejemplo:

p:nth-of-type(2)

Descripción de ejemplo:

Selecciona cada elemento <p> que es el segundo elemento <p> de su padre

:only-of-type

Ejemplo:

p:only-of-type

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el único elemento <p> de su padre

:only-child

Ejemplo:

p:only-child

Descripción de ejemplo:

Selecciona cada elemento <p> que sea el único hijo de su padre

:optional

Ejemplo:

input:optional

Descripción de ejemplo:

Selecciona elementos <input> sin atributo "requerido"

:out-of-range

Ejemplo:

input:out-of-range

Descripción de ejemplo:

Selecciona elementos <input> con un valor fuera de un rango especificado

:read-only

Ejemplo:

input:read-only

Descripción de ejemplo:

Selecciona elementos <input> con un atributo de "solo lectura" especificado

:read-write

Ejemplo:

input:read-write

Descripción de ejemplo:

Selecciona elementos <input> sin atributo de "solo lectura"

:required

Ejemplo:

input:required

Descripción de ejemplo:

Selecciona elementos <input> con un atributo "requerido" especificado

:root

Ejemplo:

root

Descripción de ejemplo:

Selecciona el elemento raíz del documento.

:target

Ejemplo:

#news:target

Descripción de ejemplo:

Selecciona el elemento #news activo actual (se hace clic en una URL que contiene ese nombre de ancla)

:valid

Ejemplo:

input:valid

Descripción de ejemplo:

Selecciona todos los elementos <input> con un valor válido

:visited

Ejemplo:

a:visited

Descripción de ejemplo:

Selecciona todos los enlaces visitados

Todos los pseudoelementos CSS

::after

Ejemplo:

p::after

Descripción de ejemplo:

Insertar contenido después de cada elemento <p>

::before

Ejemplo:

p::before

Descripción de ejemplo:

Insertar contenido antes de cada elemento <p>

::first-letter

Ejemplo:

p::first-letter

Descripción de ejemplo:

Selecciona la primera letra de cada elemento <p>

::first-line

Ejemplo:

p::first-line

Descripción de ejemplo:

Selecciona la primera línea de cada elemento <p>

::marker

Ejemplo:

::marker

Descripción de ejemplo:

Selecciona los marcadores de los elementos de la lista.

::selection

Ejemplo:

p::selection

Descripción de ejemplo:

Selecciona la parte de un elemento que es seleccionada por un usuario