Atributo, listas y relaciones

En la lección anterior aprendiste a apuntar a un elemento por sí mismo: su tipo, su clase, su ID. Ahora vas más allá: seleccionar por un atributo que tiene, agrupar varios en una regla, y apuntar por la posición en el árbol del documento.

Selector de atributo (`[href]`, `[type="text"]`)

Se puede seleccionar por tener un atributo o por su valor exacto, usando corchetes:

a[href]            { color: teal; }       /* enlaces que TIENEN href */
input[type="text"] { background-color: white; } /* inputs cuyo type es exactamente "text" */

[atributo] → el elemento tiene ese atributo (sin importar el valor).
[atributo="valor"] → el atributo tiene exactamente ese valor.

Esto conecta directamente con el Bloque I: el href de links (CAT-06), el type de inputs de formularios (CAT-09). Ahora podés estilar según esos atributos.

Lista de selectores — una coma, una regla para varios

Una coma separa varios selectores que comparten la misma regla. Ahorra repetir el bloque de declaraciones:

h1, h2, h3 {
  color: teal;
  font-weight: bold;
}

Equivale a tres reglas idénticas. La coma se lee “y también”.

Atención a la confusión frecuente:

Sintaxis	Significado
`h1, h2`	h1 y también h2 — dos selectores independientes
`h1 h2`	`<h2>` dentro de `<h1>` — selector descendiente (ver abajo)
`h1.dest`	`<h1>` que además tiene la clase `dest` — intersección

Descendiente vs hijo directo — el punto más fino del módulo

Se enseñan juntos porque su contraste es donde se entienden mejor.

Descendiente (espacio): nav a selecciona todos los <a> que estén dentro de un <nav>, a cualquier profundidad — hijos, nietos, bisnietos.

Hijo directo (>): ul > li selecciona solo los <li> que son hijos inmediatos de un <ul>, exactamente un nivel.

El ejemplo donde dan resultados distintos:

<nav>
  <a href="#">Inicio</a>          <!-- hijo directo de nav -->
  <ul>
    <li><a href="#">Carta</a></li> <!-- a es NIETO de nav -->
  </ul>
</nav>

nav a   { color: teal; }  /* alcanza AMBOS enlaces (hijo y nieto) */
nav > a { color: red;  }  /* SOLO el primer <a> — el de adentro del <li> NO */

El espacio = “en cualquier nivel adentro de”.
El > = “exactamente un nivel, hijo inmediato”.

El contraste se ve más claro en el preview: con nav a ambos enlaces cambian de color; con nav > a solo el que es hijo directo. Probalo visualmente.

Los espacios alrededor del `>` no cambian el significado

ul > li, ul>li y ul> li son equivalentes — el > es el operador. Lo que sí cambia el significado es usar un espacio solo (sin >) vs el > mismo:

ul li → descendiente (cualquier nivel)
ul > li → hijo directo (un nivel)

Tu turno: escribí las cuatro reglas en la pestaña CSS y hacé clic en “Comprobar”.