Selectores CSS: etiquetas, clases, ID, descendientes y combinadores

En la guía anterior aprendimos qué es CSS, cómo conectarlo con HTML y cómo escribir nuestras primeras reglas. Ahora vamos a profundizar en una de las partes más importantes: los selectores.

Los selectores permiten indicar con precisión qué elementos HTML queremos modificar.

¿Qué es un selector CSS?

Un selector identifica uno o varios elementos del documento.

Por ejemplo:

p {
    color: #333;
    font-size: 18px;
}

En esta regla, p es el selector. Significa que el estilo se aplicará a todos los párrafos.

Selector por etiqueta

Es el selector más simple.

<h2>Título de sección</h2>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>

CSS:

p {
    color: blue;
}

Todos los elementos p serán azules.

Selector por clase

Las clases son una de las herramientas más utilizadas en CSS porque permiten reutilizar estilos.

<p class="destacado">
    Texto importante
</p>

<p class="destacado">
    Otro texto importante
</p>

CSS:

.destacado {
    color: #007bff;
    font-weight: bold;
}

El punto . indica que estamos seleccionando una clase.

Selector por ID

<h1 id="titulo-principal">
    Club Programador
</h1>

CSS:

#titulo-principal {
    color: #007bff;
}

El símbolo # indica un selector por id.

Class vs ID

Una diferencia práctica:

• class: se puede reutilizar en varios elementos;
• id: debería identificar un elemento único dentro de la página.

Para estilos, normalmente conviene utilizar clases porque son más reutilizables y flexibles.

Selector universal

El selector universal se representa con *.

* {
    box-sizing: border-box;
}

Esta regla afecta a todos los elementos.

Más adelante veremos por qué box-sizing: border-box es tan habitual cuando trabajamos con el modelo de caja.

Agrupar selectores

Podemos aplicar las mismas reglas a varios selectores separándolos con comas.

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

Así evitamos repetir código.

Selector descendiente

Permite seleccionar elementos que están dentro de otros.

<section class="noticias">
    <h2>Noticias</h2>
    <p>Primera noticia</p>
</section>

<p>Texto fuera de la sección</p>

CSS:

.noticias p {
    color: green;
}

Solo los párrafos dentro de .noticias serán verdes.

Hijo directo: >

El combinador > selecciona elementos que son hijos directos.

<div class="contenedor">
    <p>Hijo directo</p>

    <section>
        <p>Descendiente, pero no hijo directo</p>
    </section>
</div>

CSS:

.contenedor > p {
    color: red;
}

Solo el primer párrafo será afectado.

Hermano adyacente: +

El combinador + selecciona el elemento inmediatamente siguiente.

<h2>Título</h2>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>

CSS:

h2 + p {
    font-weight: bold;
}

Solo el primer párrafo después del h2 será afectado.

Hermanos generales: ~

El combinador ~ selecciona hermanos posteriores del mismo nivel.

h2 ~ p {
    color: #555;
}

Selectores de atributos

Podemos seleccionar elementos según la presencia o el valor de un atributo.

<input type="text">
<input type="email">
<input type="password">

CSS:

input[type="email"] {
    border: 2px solid #007bff;
}

Solo el campo de tipo email tendrá ese borde.

Seleccionar por presencia de atributo

input[required] {
    background-color: #fffbe6;
}

Esta regla afecta a todos los inputs que tengan el atributo required.

Combinar selectores

Los selectores pueden combinarse.

<p class="mensaje importante">
    Atención
</p>

CSS:

p.importante {
    color: red;
}

Esto selecciona párrafos que además tengan la clase importante.

Más de una clase

<div class="tarjeta destacada">
    Contenido
</div>

CSS:

.tarjeta.destacada {
    border: 2px solid #007bff;
}

Introducción a la especificidad

¿Qué ocurre si varias reglas intentan cambiar la misma propiedad?

Por ejemplo:

<p id="mensaje" class="destacado">
    Hola
</p>

Y CSS:

p {
    color: blue;
}

.destacado {
    color: green;
}

#mensaje {
    color: red;
}

En este ejemplo, el selector por ID tiene mayor especificidad y el texto terminará siendo rojo.

Como introducción, podemos pensar este orden aproximado:

etiqueta  <  clase  <  id

Más adelante profundizaremos en cómo se calcula realmente la especificidad.

El orden también importa

Si dos reglas tienen la misma especificidad, normalmente prevalece la que aparece más abajo.

p {
    color: blue;
}

p {
    color: green;
}

En este caso, los párrafos serán verdes.

Ejemplo práctico

HTML:

<main class="contenido">

    <article class="tarjeta destacada">

        <h2>Curso de HTML</h2>

        <p>
            Aprendé HTML desde cero.
        </p>

        <a href="#" class="boton">
            Ver curso
        </a>

    </article>

    <article class="tarjeta">

        <h2>Curso de CSS</h2>

        <p>
            Aprendé a aplicar estilos.
        </p>

        <a href="#" class="boton">
            Ver curso
        </a>

    </article>

</main>

CSS:

.contenido {
    font-family: Arial, sans-serif;
}

.tarjeta {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.tarjeta.destacada {
    border: 2px solid #007bff;
}

.tarjeta h2 {
    color: #007bff;
}

.boton {
    text-decoration: none;
    font-weight: bold;
}

Errores comunes

• olvidar el punto al seleccionar una clase;
• olvidar el # al seleccionar un id;
• usar el mismo id en varios elementos;
• crear selectores demasiado largos y difíciles de mantener;
• abusar de IDs para estilos;
• confundir descendiente con hijo directo;
• no entender por qué una regla pierde frente a otra por especificidad;
• repetir reglas que podrían agruparse.

Ejercicio para practicar

Partiendo de este HTML:

<section class="cursos">

    <article class="curso destacado">
        <h2>HTML</h2>
        <p>Curso inicial</p>
    </article>

    <article class="curso">
        <h2>CSS</h2>
        <p>Curso de estilos</p>
    </article>

</section>

Intentá crear reglas para:

• cambiar el color de todos los h2 dentro de .cursos;
• agregar un borde a todos los elementos con clase curso;
• aplicar un estilo diferente solo a .destacado;
• modificar únicamente los párrafos dentro de los cursos.

Qué aprendimos

• selector por etiqueta;
• selector por clase;
• selector por ID;
• selector universal;
• agrupación de selectores;
• descendientes;
• hijos directos;
• hermanos adyacentes y generales;
• selectores de atributos;
• combinación de clases;
• introducción a la especificidad;
• importancia del orden de las reglas.

Seguí aprendiendo CSS

La guía anterior es:

Introducción a CSS: qué es, cómo funciona y cómo aplicar estilos a una página HTML

El próximo paso es estudiar uno de los conceptos fundamentales de CSS: el modelo de caja:

Modelo de caja en CSS: width, height, margin, padding, border y box-sizing →

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender desarrollo web, podés apoyar a Club Programador.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal