Sesión 12 – Selectores y pseudo-clases CSS

1

Pseudo-clases de estadoEstilos según la interacción del usuario

Las pseudo-clases seleccionan elementos según su estado o posición.

/* Cuando el ratón pasa por encima */
a:hover {
    color: orange;
    text-decoration: underline;
}

/* Cuando el usuario hace clic (elemento activo) */
a:active {
    color: red;
}

/* Enlaces ya visitados */
a:visited {
    color: #663399;
}

/* Cuando el elemento tiene el foco (teclado o clic) */
input:focus {
    outline: 2px solid #4CAF50;
    border-color: #4CAF50;
}

/* Campo obligatorio */
input:required {
    border-left: 3px solid red;
}

/* Campo válido */
input:valid {
    border-left: 3px solid green;
}

2

Pseudo-clases de posiciónSeleccionar por orden en el DOM

/* Primer hijo */
li:first-child {
    font-weight: bold;
}

/* Último hijo */
li:last-child {
    border-bottom: none;
}

/* Filas pares de una tabla */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Filas impares */
tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Cada tercer elemento */
li:nth-child(3n) {
    color: blue;
}

/* Negación: todos excepto el primero */
p:not(:first-child) {
    text-indent: 1.5em;
}

3

Selectores combinadoresRelaciones entre elementos

/* Descendiente: cualquier <a> dentro de <nav> */
nav a { color: white; }

/* Hijo directo: solo <li> hijos directos de <ul> */
ul > li { margin-bottom: 5px; }

/* Hermano adyacente: <p> inmediatamente después de <h2> */
h2 + p { font-size: 1.2em; font-weight: bold; }

/* Hermano general: todos los <p> hermanos posteriores de <h2> */
h2 ~ p { color: #555; }

4

Selectores de atributoFiltrar por atributos HTML

/* Elementos con un atributo específico */
input[required] { border-left: 3px solid red; }

/* Atributo con valor exacto */
input[type="email"] { background-image: url('icono-email.svg'); }

/* Atributo que empieza por un valor */
a[href^="https"] { color: green; }

/* Atributo que termina con un valor */
a[href$=".pdf"] { color: red; }

/* Atributo que contiene un valor */
a[href*="wikipedia"] { font-style: italic; }

Selectores múltiples (agrupar)

/* Mismo estilo para varios selectores */
h1, h2, h3 {
    font-family: 'Georgia', serif;
    color: #333;
}

5

Pseudo-elementosEstilizar partes de un elemento

Los pseudo-elementos permiten estilizar partes de un elemento o insertar contenido decorativo.

/* Insertar contenido antes del elemento */
.nota::before {
    content: "\1F4CC ";
    font-weight: bold;
}

/* Insertar contenido después del elemento */
.enlace-externo::after {
    content: " \2197";
    font-size: 0.8em;
}

/* Primera letra de un párrafo */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: darkblue;
    float: left;
    margin-right: 5px;
}

/* Primera línea de un párrafo */
p::first-line {
    font-style: italic;
}

6

Demo en vivoPseudo-clases y pseudo-elementos en acción

:first-child, :last-child, :nth-child, :hover

Pasa el ratón sobre los elementos. Observa cómo el primer elemento está en negrita, el último en cursiva, los pares tienen fondo, y cada tercer elemento tiene borde derecho.

Elemento 1 — :first-child (negrita + borde izquierdo)
Elemento 2 — :nth-child(even) (fondo coloreado)
Elemento 3 — :nth-child(3n) (borde derecho dorado)
Elemento 4 — :nth-child(even)
Elemento 5
Elemento 6 — :nth-child(even) + :nth-child(3n)
Elemento 7 — :last-child (cursiva + sin borde inferior)

:hover, :active — Enlaces

Hover sobre mí Haz clic (:active) Enlácame

:focus, :required, :valid — Formularios

Nombre (obligatorio):

Email (obligatorio):

Teléfono (opcional):

::before, ::after, ::first-letter

Este párrafo usa ::before para añadir un icono de chincheta.

Otro ejemplo de contenido insertado con CSS.

Enlace externo con ::after

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum velit nec arcu dapibus, eu gravida nibh volutpat. Sed facilisis mi sit amet urna interdum auctor.

7

Ejercicio prácticoAplica selectores avanzados a tu proyecto

Tareas de la sesión

Añade efectos hover a los enlaces de tu menú de navegación (cambio de color, subrayado, fondo).
Estiliza los estados :focus de los campos de formulario con un borde de color.
Aplica franjas de color alternadas a las filas de tu tabla usando tr:nth-child(even).
Usa :first-child y :last-child para dar un estilo diferente al primer y último elemento de las listas.
Usa ::before para añadir un icono antes de los elementos de una lista.
Estiliza los enlaces visitados con a:visited.
Usa un selector de atributo para dar estilo diferente a los enlaces externos (que empiezan por https).
Aplica p::first-letter para crear una letra capital decorativa en el primer párrafo de una sección.