Apuntes sobre 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