¿Cómo seleccionar en CSS?

Clases

Una clase es un selector que puedes usar para aplicar estilos a uno o más elementos de tu documento HTML. Es una de las herramientas más versátiles en CSS, ya que te permite reutilizar los mismos estilos en diferentes partes de tu sitio.

Cómo usar una clase CSS

Añade un atributo class al elemento HTML que quieras estilizar:
```
<div class="highlight">This text will be highlighted.</div>
```

Define los estilos correspondientes en tu archivo CSS:

.highlight {
    background-color: yellow;
    color: black;
}

Características clave de las clases CSS

Comienzan con un punto (.) en CSS.
Se pueden usar en múltiples elementos.
Son ideales para aplicar estilos genéricos y reutilizables.

Más sobre clases en MDN

ID’s

Un ID es un selector único que se aplica a un único elemento en el DOM. Se utiliza cuando necesitas aplicar estilos específicos a un elemento concreto.

Cómo usar un ID CSS

Añade un atributo id al elemento:

<h1 id="main-title">This is the main title</h1>

Define los estilos en CSS usando el símbolo #:

#main-title {
    font-size: 2rem;
    color: darkblue;
}

Características clave de los ID’s CSS

Comienzan con el símbolo # en CSS.
Deben ser únicos dentro del documento (cada elemento debe tener un ID único).
Tienen mayor especificidad que las clases.

Más sobre ID’s en MDN

Pseudo-clases CSS

Una pseudo-clase define el estado especial de un elemento. Te permite aplicar estilos en función de eventos del usuario, posición en el DOM u otras condiciones específicas.

Cómo usar una pseudo-clase CSS

a:hover {
    color: red;
}

En este caso, el texto del enlace cambiará a rojo cuando el usuario pase el cursor sobre él.

Ejemplos comunes de pseudo-clases CSS

:hover: Cuando el usuario pasa el ratón sobre un elemento.
:focus: Cuando un elemento (como un input) tiene el foco.
:nth-child(n): Selecciona el n-ésimo hijo de un elemento (las veremos más adelante).
:first-child y :last-child: Seleccionan el primer o último hijo de un elemento.
:not: Representa elementos que no se encuentran en la selección.

Listado completo de pseudo-clases en MDN

Pseudo-elementos CSS

Un pseudo-elemento te permite seleccionar y estilizar una parte específica de un elemento, como su primera letra o línea, o incluso generar contenido adicional.

Cómo usar un pseudo-elemento CSS

p::first-line {
    font-weight: bold;
}

En este ejemplo, la primera línea de cualquier párrafo se mostrará en negrita.

Ejemplos comunes de pseudo-elementos CSS

::before y ::after: Insertan contenido antes o después de un elemento.
::first-line: Aplica estilos a la primera línea de un elemento.
::first-letter: Aplica estilos a la primera letra de un elemento.

Diferencia entre pseudo-clases y pseudo-elementos

Pseudo-clases: Actúan sobre el estado de un elemento (por ejemplo, :hover o :focus).
Pseudo-elementos: Actúan sobre partes específicas de un elemento (por ejemplo, ::before o ::first-letter).

Listado completo de pseudo-elementos en MDN

Mejores prácticas

Clases vs. ID’s

Usa clases para estilos reutilizables y genéricos.
Usa ID’s para estilos específicos y únicos, pero con moderación, ya que tienen mayor especificidad y pueden dificultar el mantenimiento del código.

Pseudo-clases y pseudo-elementos

Usa pseudo-clases para enriquecer la interacción del usuario.
Usa pseudo-elementos para personalizar el contenido sin alterar el HTML original.

Organización del código

Mantén tus selectores simples y claros. Evita combinaciones demasiado complejas que aumenten la especificidad innecesariamente.
Agrupa los estilos relacionados para mejorar la legibilidad.