Selectores

Decirle a CSS a qué te refieres

Por elemento

p {
    line-height: 1.6;
}

Afecta a todos los párrafos del sitio. Útil para las bases; peligroso si lo usas para algo específico.

Por clase

<p class="destacado">Oferta especial.</p>

.destacado {
    font-weight: 700;
}

Una clase puede repetirse en tantos elementos como quieras, y un elemento puede tener varias:

<article class="card producto destacado">

Es el selector que más vas a usar, porque describe un papel y se puede reutilizar.

Por id

<section id="productos">

#productos {
    padding-block: 3rem;
}

Existe, y funciona, pero un id es único en la página: no puedes reutilizar el estilo. Además pesa mucho en los conflictos, como veremos mañana. Regla práctica: los id son para enlazar y para los label, las clases son para dar estilo.

Descendiente y directo

nav a {          /* cualquier enlace dentro de nav, a la profundidad que sea */
    text-decoration: none;
}

nav > ul {       /* solo las listas que son hijas directas de nav */
    display: flex;
}

Por atributo

input[type="email"] {
    border-color: #999;
}

a[href^="http"] {     /* enlaces cuyo href empieza por http: los externos */
    ...
}

Aquí se comprueba el efecto de lo que hiciste en la UD1: si escribiste type="email" en lugar de type="text", ahora tienes un selector. El HTML bien marcado te devuelve selectores.

Pseudo-clases

Seleccionan por estado o por posición, no por lo que el elemento es:

a:hover        { }   /* el cursor está encima */
a:focus-visible{ }   /* tiene el foco de teclado */
li:first-child { }   /* es el primer hijo de su padre */
li:last-child  { }   /* es el último */
input:required { }   /* el campo es obligatorio */
input:invalid  { }   /* su valor no cumple la validación */

Pseudo-clase

Un selector que depende del estado o de la posición del elemento, no de su marcado. Se escribe con dos puntos y no existe en el HTML: la calcula el navegador.

Agrupar

h1, h2, h3 {
    line-height: 1.15;
}

La coma es «o». Un fallo típico es olvidarla: h1 h2 significa «un h2 dentro de un h1», que casi nunca existe, y entonces la regla no hace nada.

Tarea 2 · El selector correcto

Para cada requisito, escribe el selector que le corresponde. No vale cualquiera que funcione: vale el que expresa lo que pide el enunciado.

Paso 1 · Te enseño uno

Requisito: los enlaces del pie no deben subrayarse, pero los del contenido sí.

¿Qué me piden seleccionar?

Enlaces, pero solo los de una zona concreta del documento.

¿Cómo está marcada esa zona?

En la UD1 el pie es un footer. Ya tengo por dónde acotar.

¿Descendiente o hijo directo?

Descendiente: los enlaces pueden estar dentro de párrafos o de listas, no necesariamente colgando del footer.

Selector

footer a { text-decoration: none; }

Fíjate en que no he inventado una clase. Si el HTML ya distingue esa zona, el selector sale solo.

Paso 2 · Ahora tú

1. Todos los enlaces de la navegación principal deben cambiar de aspecto.
2. El primer producto del catálogo debe destacarse.
3. Los campos obligatorios del formulario deben distinguirse.
4. Los enlaces externos deben poder marcarse de forma distinta a los internos.
5. Solo los párrafos que están dentro de una ficha de producto, no todos los del sitio.

Estoy atascado · ¿clase o selector estructural?

Pregúntate si la condición ya está escrita en el HTML. Si es «los obligatorios», el HTML ya lo dice con required: usa :required. Si es «el primero», el HTML ya lo dice por su posición: usa :first-child. Si es «los de oferta», eso no está en ninguna parte del marcado y sí necesita una clase.

Inventar una clase para algo que el documento ya declara es duplicar la información en dos sitios, y tarde o temprano dejan de coincidir.

Ver soluciones

1 · nav a, o si tienes varias navegaciones, acota por su etiqueta: nav[aria-label="Navegación principal"] a.

2 · .catalogo article:first-child, con la clase que uses para el contenedor.

3 · input:required, que además cubre los campos que añadas después sin tocar el CSS.

4 · a[href^="http"], porque los internos de tu proyecto son rutas relativas y no empiezan por http.

5 · article p, o mejor .producto p si el catálogo comparte marcado con otras zonas.

Ver respuestas

1 · El primero selecciona cualquier enlace dentro del nav, a la profundidad que sea; el segundo, solo los que cuelgan directamente de él.

2 · Porque una clase se reutiliza y un id es único, y además el id pesa demasiado en los conflictos de la cascada.

3 · «O»: la regla se aplica a los h1 y a los h2. Sin coma significaría «un h2 dentro de un h1».

---