39. Pseudo-clases CSS

Qué son las pseudo-clases?

Las pseudo-clases son usadas para definir un estado especial de un elemento. Por ejm, se pueden usar para:

  • Dar estilo a un elemento cuando un usuario pasa el ratón sobre él.
  • Dar estilos diferentes a enlaces visitados y sin visitar.
  • Dar estilo a un elemento cuando es el foco.

Sintaxis

La sintaxis sería la siguiente:

selector:pseudo-clase {
  propiedad: valor;
}

Anchor Pseudo-classes

Los enlaces pueden ser mostrados de diferentes maneras.

Ejm

/* enlace no visitado */
a:link {
color: #FF0000;
}/* enlace visitado*/
a:visited {
color: #00FF00;
}/* botón sobre enlace */
a:hover {
color: #FF00FF;
}/* enlace seleccionado */
a:active {
color: #0000FF;
}

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

Pseudo-clases y clases HTML

Las pseudo-clases se pueden combinar con las clases HTML.

Ejm

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

<p>
Cuando pasa el cursor sobre el primer enlace a continuación, cambiará el
color y el tamaño de fuente:
</p>

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

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

Hover en <div>

Veamos un ejm de usar hover en la etiqueta <div>.

<!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>
Pasa el mouse sobre el elemento div a continuación para cambiar su color
de fondo:
</p>

<div>Mouse Over Me</div>
</body>
</html>

Simple Tooltip Hover

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

Ejm

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

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

<body>
<div>
Situate sobre este elemento para mostrar el elemento p
<p>Ahora me muestro</p>
</div>
</body>
</html>

La pseudo-clase :first-child

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.

Ejm

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

Coincide con el primer elemento <i> en todos los elementos <p>

Ejm

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

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

Ejm

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

Tabla de pseudo-clases

SelectorEjemploDescripción del ejemplo
:activea:activeSelecciona el enlace activo
:checkedinput:checkedSelecciona cada elemento <input> marcado
:disabledinput:disabledSelecciona cada elemento <input> deshabilitado
:emptyp:emptySelecciona cada elemento <p> que no tiene hijos
:enabledinput:enabledSelecciona cada elemento <input> habilitado
:first-childp:first-childSelecciona todos los elementos <p> que son el primer hijo de su padre
:first-of-typep:first-of-typeSelecciona cada elemento <p> que es el primer elemento <p> de su padre
:focusinput:focusSelecciona el elemento <input> que tiene el foco
:hovera:hoverSelecciona enlaces al pasar el ratón por encima
:in-rangeinput:in-rangeSelecciona elementos <input> con un valor dentro de un rango especificado
:invalidinput:invalidSelecciona todos los elementos <input> con un valor no válido
:lang(language)p:lang(it)Selecciona cada elemento <p> con un valor de atributo lang que comienza con «it»
:last-childp:last-childSelecciona cada elemento <p> que es el último hijo de su padre
:last-of-typep:last-of-typeSelecciona cada elemento <p> que es el último elemento <p> de su padre
:linka:linkSelecciona todos los enlaces no visitados
:not(selector):not(p)Selecciona cada elemento que no es un elemento <p>
:nth-child(n)p:nth-child(2)Selecciona cada elemento <p> que es el segundo hijo de su padre
:nth-last-child(n)p:nth-last-child(2)Selecciona cada elemento <p> que es el segundo hijo de su padre, contando desde el último hijo
:nth-last-of-type(n)p:nth-last-of-type(2)Selecciona cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el último hijo
:nth-of-type(n)p:nth-of-type(2)Selecciona cada elemento <p> que es el segundo elemento <p> de su padre
:only-of-typep:only-of-typeSelecciona cada elemento <p> que es el único elemento <p> de su padre
:only-childp:only-childSelecciona cada elemento <p> que es el único hijo de su padre
:optionalinput:optionalSelecciona elementos <input> sin atributo «requerido»
:out-of-rangeinput:out-of-rangeSelecciona elementos <input> con un valor fuera de un rango especificado
:read-onlyinput:read-onlySelecciona elementos <input> con un atributo de «readonly» especificado
:read-writeinput:read-writeSelecciona elementos <input> sin atributo de «readonly»
:requiredinput:requiredSelecciona elementos <input> con un atributo «required» especificado
:rootrootSelecciona el elemento raíz del documento.
:target#news:targetSelecciona el elemento #news activo actual (haciendo clic en una URL que contiene ese nombre de ancla)
:validinput:validSelecciona todos los elementos <input> con un valor válido
:visiteda:visitedSelecciona todos los enlaces visitados

Todos los pseudo-elementos

SelectorEjemploDescripción del ejemplo
::afterp::afterInsertar contenido después de cada elemento <p>
::beforep::beforeInsertar contenido antes de cada elemento <p>
::first-letterp::first-letterSelecciona la primera letra de cada elemento <p>
::first-linep::first-lineSelecciona la primera línea de cada elemento <p>
::selectionp::selectionSelects the portion of an element that is selected by a user
Scroll al inicio