Fundamentos CSS | Máster en Diseño Web | Módulo III Programación Frontend

Módulo III
Programación Frontend

Pseudo clases & pseudo elementos

Pseudoclasses CSS

Llamamos pseudo clase a un tipo de pseudo-selector que aplica estilos a un estado concreto de los elementos del DOM en lugar de aplicarlos a los propios elementos en sí.

Su sintaxis es el nombre precedido por ":"

elemento:pseudoclase

Pseudoclases :link y :visited

Hacen referencia a un estado concreto de un enlace.


/* Estado enlace no visitado */
a:link {
    color: #c0ffee;
}

/* Estado enlace visitado */
a:visited {
    color: #decaff;
}

TIP - :link ha de aplicarse ANTES de :visited para que funcionen correctamente.

Pseudoclases :hover y :active

Hacen referencia a un estado concreto de un enlace.


/* Estado sobre un enlace */
a:hover {
    color: #bada55;
}

/* Estado enlace activo */
a:active {
    color: #1ad1e5;
}

TIP - :hover ha de aplicarse ANTES de :active para que funcionen correctamente.

Pseudoclase :first-child

Selecciona el primer hijo de un elemento.


/* Seleccionamos el primer elemento li de cualquier ul del DOM */
li:first-child {
    color: #fe0;
}

/* Seleccionamos el primer elemento li contenido en nav */
nav li:first-child {
    color: #1ad1e5;
}

Pseudoclase :last-child

Selecciona el último hijo de un elemento.


/* Seleccionamos el último elemento li de cualquier ul del DOM */
li:last-child {
    color: #fe0;
}

/* Seleccionamos el último elemento li contenido en nav */
nav li:last-child {
    color: #c55;
}

Pseudoclase :nth-child()

Selecciona el elemento dado en la expresión.
Mediante even y odd podemos seleccionar pares/i


/* Seleccionamos sólo los LI pares */
li:nth-child(even) {
    color: #fafafa;
}

/* Seleccionamos un LI de cada 3 */
li:nth-child(3n) {
    color: #fafafa;
}

Además podemos usar nth-last-child(2) para seleccionar el segundo elemento empezando por el final.

Pseudoclase :not()

:not() es una pseudoclase que admite como argumento a otro selector, el cual excluirá a la hora de aplicar su selección.


<ul>
    <li>Item 1</li>
    <li class="diferente">Item 2</li>
    <li>Item 3</li>
</ul>


/* Selecciona todos los LI excepto el de la class .diferente */
li:not(.diferente) { color: red; }

Item 1
Item 2
Item 3

Pseudoclase :target

Selecciona el elemento cuyo ID coincide con la URL del site.


/* Aplicamos color cuando la URL sea: http://mysite.com/#exoplanet */
section:exoplanet {
    background-color: #fe0;
}

ver ejemplo

Pseudoclase :checked

Selecciona el checkbox cuyo estado es 'checked'.


/* Aplicamos color a la etiqueta cuando el estado es checked */
input[type=checkbox]:checked + label {
  color: #fe0;
  font-style: normal;
}

Pseudoclase :focus

Definimos el estilo del estado 'hover' para enlaces y elementos input cuando se navega con el teclado.


/* Aplicamos estilo a un input text cuando su estado es focus */
input[type=text]:focus {
  color: black;
  background: yellow;
}

Pseudoclase :required

Definimos el estilo de todos los elementos INPUT que dispongan del atributo required.
De esta forma podemos identificar de forma diferente los campos obligatorios de un formulario.


/* Aplicamos estilo a un input obligatorio de un form */
input[type=text]:required {
  color: black;
  background: red;
}

Pseudoclase :optional

Representa todos los elementos INPUT que no tengan el atributo required.


/* Aplicamos estilo a un input obligatorio de un form */
input[type=text]:optional {
  color: black;
  background: lightgrey;
}

Pseudoclase :valid

Representa todos los elementos INPUT con contenido validado según hayamos especificado en su tipo.
De esta forma podemos aplicar un estilo diferente cuando el usuario ha introducido un valor que no se corresponde al esperado.


/* Aplicamos estilo para mostrar un input con contenido válido */
input[type=text]:valid {
  color: black;
  background: lightgreen;
}

Pseudoclase :invalid

Representa todos los elementos INPUT con contenido inválido según hayamos especificado en su tipo.


/* Aplicamos estilo para mostrar un input con contenido no válido */
input[type=text]:invalid {
  color: black;
  background: red;
}

Index of standard pseudo-classes

A día de hoy disponemos de las siguientes pseudoclases.
Es necesario consultar la compatibilidad de cada una en los diferentes navegadores web.

Pseudoelementos CSS

Llamamos pseudo elemento a una abstracción de un elemento en sí que puede no existir en el propio DOM.
También pueden referirse a una parte específica del elemento.

Su sintaxis es el nombre precedido por ::

elemento::pseudoelemento

Pseudoelemento ::before

Insertamos contenido antes de un elemento dado mediante la declaración content.


/* Insertamos un gato antes del párrafo */
h3::before {
    content: "(⊙_◎)";
    color: green;
    font-size: 0.7em;
    padding-right: 20px;
}

Say whaaat?

Pseudoelemento ::before

Además de texto podemos definir un alto y ancho y añadir una imagen de fondo
para mostrar gatos imágenes:


/* Insertamos un gato antes del párrafo */
p::before {
    content: "";
    background-image: url(cat-watching.gif);
    float: left; margin: 0 30px 0 50px; height: 250px; width: 400px;
}