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

Selector	Ejemplo	Descripción del ejemplo
*:active*	a:active	Selecciona el enlace activo
*:checked*	input:checked	Selecciona cada elemento <input> marcado
*:disabled*	input:disabled	Selecciona cada elemento <input> deshabilitado
*:empty*	p:empty	Selecciona cada elemento <p> que no tiene hijos
*:enabled*	input:enabled	Selecciona cada elemento <input> habilitado
*:first-child*	p:first-child	Selecciona todos los elementos <p> que son el primer hijo de su padre
*:first-of-type*	p:first-of-type	Selecciona cada elemento <p> que es el primer elemento <p> de su padre
*:focus*	input:focus	Selecciona el elemento <input> que tiene el foco
*:hover*	a:hover	Selecciona enlaces al pasar el ratón por encima
*:in-range*	input:in-range	Selecciona elementos <input> con un valor dentro de un rango especificado
*:invalid*	input:invalid	Selecciona 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-child*	p:last-child	Selecciona cada elemento <p> que es el último hijo de su padre
*:last-of-type*	p:last-of-type	Selecciona cada elemento <p> que es el último elemento <p> de su padre
*:link*	a:link	Selecciona 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-type*	p:only-of-type	Selecciona cada elemento <p> que es el único elemento <p> de su padre
*:only-child*	p:only-child	Selecciona cada elemento <p> que es el único hijo de su padre
*:optional*	input:optional	Selecciona elementos <input> sin atributo «requerido»
*:out-of-range*	input:out-of-range	Selecciona elementos <input> con un valor fuera de un rango especificado
*:read-only*	input:read-only	Selecciona elementos <input> con un atributo de «readonly» especificado
*:read-write*	input:read-write	Selecciona elementos <input> sin atributo de «readonly»
*:required*	input:required	Selecciona elementos <input> con un atributo «required» especificado
*:root*	root	Selecciona el elemento raíz del documento.
*:target*	#news:target	Selecciona el elemento #news activo actual (haciendo clic en una URL que contiene ese nombre de ancla)
:*valid*	input:valid	Selecciona todos los elementos <input> con un valor válido
*:visited*	a:visited	Selecciona todos los enlaces visitados

Todos los pseudo-elementos

Selector	Ejemplo	Descripción del ejemplo
*::after*	p::after	Insertar contenido después de cada elemento <p>
*::before*	p::before	Insertar contenido antes de cada elemento <p>
*::first-letter*	p::first-letter	Selecciona la primera letra de cada elemento <p>
*::first-line*	p::first-line	Selecciona la primera línea de cada elemento <p>
*::selection*	p::selection	Selects the portion of an element that is selected by a user