Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Selectores en CSS: Clases, IDs y mĂĄs

Como acabamos de ver, los selectores son la base de CSS: nos permiten elegir quĂ© elementos de una pĂĄgina queremos estilizar. Si solo usĂĄramos etiquetas HTML como p o h1, pronto nos quedarĂ­amos cortos, porque no todos los pĂĄrrafos o tĂ­tulos son iguales. Por eso existen selectores mĂĄs flexibles, como clases, IDs o combinaciones, que nos permiten apuntar a elementos segĂșn su contexto, atributos o posiciĂłn.

Selectores de clase (.class)

Las clases son como etiquetas reutilizables que puedes asignar a cualquier elemento HTML. Son muy prĂĄcticas porque no estĂĄn vinculadas a una etiqueta especĂ­fica: puedes usarlas en un tĂ­tulo, un pĂĄrrafo o donde quieras.

CĂłmo funcionan

En CSS defines una clase con un punto (.) seguido del nombre. En HTML la aplicas al elemento con el atributo class.

.destacado { color: blue; }
.fondo-gris { background-color: lightgray; }

<h1 class="destacado">TĂ­tulo en azul</h1>
<p class="destacado fondo-gris">PĂĄrrafo azul con fondo gris</p>

FĂ­jate que el elemento <p> tiene dos clases (destacado y fondo-gris). En HTML se separan con espacios y puedes usar tantas como necesites.

Clases con etiquetas especĂ­ficas

Si quieres que una clase solo afecte a una etiqueta concreta, combĂ­nala con el nombre de la etiqueta:

h2.destacado { color: green; }

<h2 class="destacado">TĂ­tulo verde</h2>
<p class="destacado">PĂĄrrafo no afectado</p>

Seleccionar elementos con mĂșltiples clases

Si un elemento tiene varias clases, puedes seleccionarlo combinando los nombres sin espacios:

p.destacado.fondo-gris { font-weight: bold; }

Esto solo afecta a un <p> que tenga ambas clases.

Nota: Los nombres de clase distinguen entre mayĂșsculas y minĂșsculas (miClase no es lo mismo que miclase). Evita comenzar con nĂșmeros o caracteres raros para asegurar compatibilidad.

Selectores de ID (#id)

Los IDs son nombres Ășnicos para identificar un solo elemento en la pĂĄgina. Son Ăștiles para estilizar algo especĂ­fico, como un menĂș o pie de pĂĄgina, y esenciales en JavaScript para seleccionar elementos.

CĂłmo funcionan

En CSS usas # seguido del nombre del ID. En HTML lo asignas con el atributo id.

#menu { background-color: navy; color: white; }

<nav id="menu">MenĂș principal</nav>

También puedes combinar el ID con la etiqueta:

nav#menu { padding: 10px; }

Importante:

  • Un ID debe ser Ășnico en toda la pĂĄgina.
  • Usa clases para estilos reutilizables e IDs para casos Ășnicos.

Selectores contextuales (descendentes)

Cuando quieres estilizar un elemento solo si estĂĄ dentro de otro, usas un selector descendente, separando los nombres por un espacio.

article p { font-size: 16px; }

<article>
  <p>Este pĂĄrrafo es 16px</p>
  <div>
    <p>Este también es 16px</p>
  </div>
</article>
<p>Este pĂĄrrafo no se afecta</p>

Nota: Estos selectores son muy Ăștiles, pero pueden impactar el rendimiento si se usan en exceso en estructuras grandes. SĂ© especĂ­fico.

Nota: Recuerda que elemento elemento se refiere a un elemento dentro de otro; elemento, elemento se refiere a los dos elementos

Selectores de hijo directo (>)

Si solo quieres estilizar los hijos directos (no nietos), usa el sĂ­mbolo >.

div > p { color: red; }

<div>
  <p>Este pĂĄrrafo es rojo</p>
  <section>
    <p>Este pĂĄrrafo no es rojo</p>
  </section>
</div>

Selectores adyacentes (+)

Seleccionan el elemento que estå justo después de otro (hermano adyacente).

h2 + p { margin-top: 10px; }

<h2>TĂ­tulo</h2>
<p>Este pĂĄrrafo tiene margen superior</p>
<p>Este no</p>

Selectores por atributo

Permiten seleccionar elementos en funciĂłn de sus atributos o valores. Muy Ăștil en formularios o enlaces.

input[type="text"] { border: 1px solid gray; }
a[href^="https"] { color: green; }
  • input[type="text"]: selecciona campos de texto.
  • a[href^="https"]: selecciona enlaces que empiecen por “https”.

También puedes usar:

  • [attr$="valor"]: si el atributo termina en "valor". Ej.: [href$=".pdf"]
  • [attr*="valor"]: si el atributo contiene "valor". Ej.: [class*="destacado"]
Selector Coincide si
 Ejemplo
[attr="valor"] El valor es exacto [type="submit"]
[attr^="inicio"] Empieza por "inicio" [href^="https"]
[attr$="final"] Termina en "final" [href$=".pdf"]
[attr*="parte"] Contiene "parte" [class*="destacado"]

Selector universal (*)

El asterisco * selecciona todos los elementos. Úsalo con cuidado para no afectar más de lo deseado.

.fondo-gris * { color: white; }

<div class="fondo-gris">
  <p>Texto blanco</p>
  <span>Texto blanco también</span>
</div>

Un toque moderno: :where()

CSS3 introdujo :where(), un selector para agrupar condiciones sin aumentar la especificidad.

A diferencia de agrupar con comas, :where() aplica estilos sin aumentar la especificidad, lo que ayuda a evitar conflictos difĂ­ciles de resolver.

:where(.destacado, .aviso) { font-weight: bold; }

Este estilo se aplica a cualquier elemento con clase destacado o aviso.

Nota histĂłrica

Hace años, CSS1 y CSS2 tenían muchas limitaciones (y navegadores poco consistentes). Hoy, todos estos selectores funcionan sin problema en los principales navegadores modernos.

TOP