Selectores

The CSS Podcast - 002: Selectors

Si tienes texto que solo quieres que sea más grande y rojo si es el primer párrafo de un artículo, ¿cómo lo haces?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Usas un selector CSS para encontrar ese elemento específico y aplicar una regla CSS, como esta.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS te proporciona muchas opciones para seleccionar elementos y aplicarles reglas, que van desde muy simples hasta muy complejas, para ayudarte a resolver situaciones como esta.

Las partes de una regla CSS

Para comprender cómo funcionan los selectores y su rol en CSS, es importante conocer las partes de una regla CSS. Una regla CSS es un bloque de código que contiene uno o más selectores y una o más declaraciones.

En esta regla CSS, el selector es .my-css-rule, que encuentra todos los elementos con una clase de my-css-rule en la página. Hay tres declaraciones dentro de las llaves. Una declaración es un par de propiedad y valor que aplica estilos a los elementos que coinciden con los selectores. Una regla CSS puede tener tantas declaraciones y selectores como desees.

Selectores simples

El grupo de selectores más sencillo se orienta a elementos HTML, además de clases, IDs y otros atributos que se pueden agregar a una etiqueta HTML.

Selector universal

Browser Support

• 1
• 12
• 1
• 1

Source

Un selector universal, también conocido como comodín, coincide con cualquier elemento.

* {
  color: hotpink;
}

Esta regla hace que cada elemento HTML de la página tenga texto en rosa intenso.

Selector de tipo

Browser Support

• 1
• 12
• 1
• 1

Source

Un selector de tipo hace coincidir un elemento HTML directamente.

section {
  padding: 2em;
}

Esta regla hace que cada elemento <section> tenga 2em de padding en todos los lados.

Selector de clase

Browser Support

• 1
• 12
• 1
• 1

Source

Un elemento HTML puede tener uno o más elementos definidos en su atributo class. El selector de clase hace coincidir cualquier elemento al que se le haya aplicado esa clase.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Cualquier elemento al que se le aplique la clase tendrá el color rojo:

.my-class {
  color: red;
}

Observa cómo el . solo está presente en el CSS y no en el HTML. Esto se debe a que el carácter . le indica al lenguaje CSS que coincida con los miembros del atributo de clase. Este es un patrón común en CSS, en el que se usa un carácter especial o un conjunto de caracteres para definir tipos de selectores.

Un elemento HTML que tenga una clase de .my-class seguirá coincidiendo con la regla CSS anterior, incluso si tiene varias otras clases, como la siguiente:

<div class="my-class another-class some-other-class"></div>

Esto se debe a que CSS busca un atributo class que contenga la clase definida, en lugar de coincidir con esa clase exactamente.

Nota: El valor de un atributo de clase puede ser casi cualquier cosa que desees. Algo que podría confundirte es que no puedes comenzar una clase (o un ID) con un número, como .1element. Puedes obtener más información en la especificación.

Selector de ID

Browser Support

• 1
• 12
• 1
• 1

Source

Un elemento HTML con un atributo id debe ser el único elemento de una página con ese valor de ID. Selecciona elementos con un selector de ID de la siguiente manera:

#rad {
  border: 1px solid blue;
}

Este CSS aplicaría un borde azul al elemento HTML que tiene un id de rad, de la siguiente manera:

<div id="rad"></div>

Al igual que con el selector de clase ., usa un carácter # para indicarle al CSS que busque un elemento que coincida con el id que lo sigue.

Nota: Si el navegador encuentra más de una instancia de un id, de todos modos aplicará las reglas de CSS que coincidan con su selector. Sin embargo, se supone que cualquier elemento que tenga un atributo id debe tener un valor único para él, por lo que, a menos que escribas CSS muy específico para un solo elemento, evita aplicar estilos con el selector id, ya que esto significa que no puedes volver a usar esos estilos en otro lugar.

Selector de atributos

Browser Support

• 1
• 12
• 1
• 3

Source

Puedes buscar elementos que tengan un atributo HTML determinado o un valor determinado para un atributo HTML con el selector de atributos. Para indicarle al CSS que busque atributos, une el selector con corchetes ([ ]).

[data-type='primary'] {
  color: red;
}

Este CSS busca todos los elementos que tienen un atributo data-type con un valor primary, de la siguiente manera:

<div data-type="primary"></div>

En lugar de buscar un valor específico de data-type, también puedes buscar elementos con el atributo presente, independientemente de su valor.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Ambos elementos <div> tendrán texto rojo.

Para usar selectores de atributos que distinguen mayúsculas de minúsculas, agrega un operador s a tu selector de atributos.

[data-type='primary' s] {
  color: red;
}

Esto significa que, si un elemento HTML tuviera un data-type de Primary, en lugar de primary, no tendría texto en rojo. Puedes hacer lo opuesto (sin distinción entre mayúsculas y minúsculas) con un operador i.

Además de los operadores de mayúsculas y minúsculas, tienes acceso a operadores que coinciden con partes de cadenas dentro de los valores de atributos.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

En esta demostración, el operador `$` en nuestro selector de atributos obtiene el tipo de archivo del atributo "href". Esto permite anteponer la etiqueta (según ese tipo de archivo) con un pseudoelemento.

Selectores de agrupación

Un selector no tiene que coincidir con un solo elemento. Para agrupar varios selectores, sepáralos con comas:

strong,
em,
.my-class,
[lang] {
  color: red;
}

En este ejemplo, se extiende el cambio de color a los elementos <strong> y <em>. También se extiende a una clase llamada .my-class y a un elemento que tiene un atributo lang.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre los selectores simples

* {}

¿Qué tipo de selector simple se usa en el fragmento anterior?

atributo

[] se usa para selectores simples de atributo.

ID

# se usa para selectores simples de ID.

universal

* es el selector simple universal.

clase

. se usa para selectores simples de class.

div {}

¿Qué tipo de selector simple se usa en el fragmento anterior?

clase

Se usa un . para los selectores simples de clase.

tipo

Se usa un nombre element para los selectores simples de tipo.

atributo

Los corchetes [] se usan para los selectores simples de atributo.

ID

Se usa un # para los selectores simples de ID.

Pseudoclases y pseudoelementos

CSS proporciona tipos de selectores útiles que se enfocan en un estado específico de la plataforma, como cuando se coloca el cursor sobre un elemento, las estructuras dentro de un elemento o las partes de un elemento.

Pseudoclases

Los elementos HTML se encuentran en varios estados, ya sea porque se interactúa con ellos o porque uno de sus elementos secundarios está en un estado determinado.

Por ejemplo, un usuario podría colocar el puntero del mouse sobre un elemento HTML o sobre un elemento secundario. En esas situaciones, usa la pseudoclase :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Obtén más información en el módulo de pseudoclases.

Pseudoelemento

Los pseudoelementos difieren de las pseudoclases porque, en lugar de responder al estado de la plataforma, actúan como si estuvieran insertando un elemento nuevo con CSS. Los pseudoelementos también son sintácticamente diferentes de las pseudoclases, porque, en lugar de usar un solo dos puntos (:), usamos dos (::).

Nota: Un colon doble (::) es lo que distingue un pseudoelemento de una seudoclase, pero como esta distinción no estaba presente en versiones anteriores de las especificaciones de CSS, los navegadores admiten un solo colon para los pseudoelementos originales, como :before y :after, para ayudar con la retrocompatibilidad con navegadores más antiguos, como IE8.

.my-element::before {
  content: 'Prefix - ';
}

Al igual que en la demostración anterior, en la que agregaste un prefijo a la etiqueta de un vínculo con el tipo de archivo que era, puedes usar el pseudoelemento ::before para insertar contenido al comienzo de un elemento o el pseudoelemento ::after para insertar contenido al final de un elemento.

Sin embargo, los pseudoelementos no se limitan a insertar contenido. También puedes usarlos para segmentar partes específicas de un elemento. Por ejemplo, supongamos que tienes una lista. Usa ::marker para aplicar diseño a cada viñeta (o número) de la lista.

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

También puedes usar ::selection para aplicar diseño al contenido que un usuario destacó.

::selection {
  background: black;
  color: white;
}

Obtén más información en el módulo sobre pseudoelementos.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre los selectores de pseudo

¿Cuántos dos puntos usan los selectores de pseudoelementos?

:

Se usa un : para segmentar pseudoclases.

::

Se usan dos :: para segmentar pseudoelementos.

:::

Esto no es válido y no se segmenta a ningún contenido.

p:hover {
  background: white;
  color: black;
}

¿Qué tipo de selector de pseudo se usa en el fragmento anterior?

Pseudoclase

Se usa un : para segmentar pseudoclases.

Pseudoelemento

Se usan dos :: para segmentar pseudoelementos.

Selectores complejos

Ya viste una gran variedad de selectores, pero, a veces, necesitarás más control detallado con tu CSS. Aquí es donde los selectores complejos pueden ayudar.

En este punto, vale la pena recordar que, aunque los siguientes selectores nos brindan más poder, solo podemos hacer una cascada hacia abajo, seleccionando elementos secundarios. No podemos segmentar hacia arriba y seleccionar un elemento superior. Explicaremos qué es la cascada y cómo funciona en una lección posterior.

Combinadores

Un combinador es lo que se encuentra entre dos selectores. Por ejemplo, si el selector fuera p > strong, el combinador sería el carácter >. Los selectores que usan estos combinadores te ayudan a seleccionar elementos según su posición en el documento.

Combinador de descendientes

Para comprender los combinadores de descendientes, primero debes comprender los elementos superiores y secundarios.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

El elemento superior es el <p> que contiene texto. Dentro de ese elemento <p>, hay un elemento <strong> que hace que su contenido esté en negrita. Debido a que está dentro de <p>, es un elemento secundario.

Un combinador descendiente nos permite segmentar un elemento secundario. Se usa un espacio () para indicarle al navegador que busque elementos secundarios:

p strong {
  color: blue;
}

Este fragmento selecciona todos los elementos <strong> que son elementos secundarios de solo elementos <p>, lo que los hace azules de forma recursiva.

Debido a que el combinador de descendientes es recursivo, se aplica el padding agregado a cada elemento secundario, lo que genera un efecto escalonado.

Este efecto se visualiza mejor en el ejemplo anterior, con el selector de combinador, .top div. Esa regla de CSS agrega padding a la izquierda a esos elementos <div>. Como el combinador es recursivo, a todos los elementos <div> que se encuentran en .top se les aplicará ese mismo padding.

Observa el panel HTML de esta demostración para ver cómo el elemento .top tiene varios elementos secundarios <div> que, a su vez, tienen elementos secundarios <div>.

Combinador de hermano siguiente

Puedes buscar un elemento que siga inmediatamente a otro elemento con un carácter + en tu selector.

Para agregar espacio entre elementos apilados, usa el combinador de hermano siguiente para agregar espacio solo si un elemento es un hermano siguiente de un elemento secundario de .top.

Puedes agregar margen a todos los elementos secundarios de .top con el siguiente selector:

.top * {
  margin-top: 1em;
}

El problema con esto es que, como seleccionas todos los elementos secundarios de .top, esta regla puede crear espacio adicional innecesario. El combinator de hermano siguiente, combinado con un selector universal, te permite no solo controlar qué elementos obtienen espacio, sino también aplicar espacio a cualquier elemento. Esto te brinda cierta flexibilidad a largo plazo, independientemente de los elementos HTML que aparezcan en .top.

Combinador de hermanos posteriores

Un combinador subsiguiente es muy similar a un selector de siguiente hermano. Sin embargo, en lugar de un carácter +, usa un carácter ~. La diferencia es que un elemento solo tiene que seguir a otro elemento con el mismo elemento superior, en lugar de ser el siguiente elemento con el mismo elemento superior.

Usa un selector posterior junto con una seudoclase ":checked" para crear un elemento de interruptor de CSS puro.

Este combinador posterior proporciona un poco menos de rigidez, lo que es útil en contextos como el ejemplo anterior, en el que cambiamos el color de un interruptor personalizado cuando la casilla de verificación asociada tiene el estado :checked.

Combinador secundario

Un combinador secundario (también conocido como descendiente directo) te permite tener más control sobre la recursividad que se incluye con los selectores de combinador. Cuando usas el carácter >, limitas el selector de combinador para que se aplique solo a los elementos secundarios directos.

Considera el ejemplo anterior del selector de hermano siguiente. El espacio se agrega a cada elemento hermano siguiente, pero si uno de esos elementos también tiene elementos hermanos siguientes como elementos secundarios, puede generar espacios adicionales no deseados.

Para solucionar este problema, cambia el selector de siguiente elemento hermano para incorporar un combinador secundario: > * + *. La regla ahora solo se aplicará a los elementos secundarios directos de .top.

Selectores compuestos

Puedes combinar selectores para aumentar la especificidad y la legibilidad. Por ejemplo, para segmentar elementos <a> que también tengan una clase de .my-class, escribe lo siguiente:

a.my-class {
  color: red;
}

Esto no aplicaría un color rojo a todos los vínculos ni solo aplicaría el color rojo a .my-class if estuviera en un elemento <a>. Para obtener más información, consulta el módulo de especificidad.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre selectores complejos

¿Cuál de los siguientes símbolos no es un combinador de selectores?

>

El combinador de subordinado directo.

÷

No es válido, no es un símbolo CSS.

+

El siguiente combinador de hermanos.

*

Este selector simple universal.

.

El selector simple de clase.

section.awesome {
  border: 1px solid hotpink;
}

El selector anterior es un ejemplo de un...

Combinador

Es un símbolo que se usa para combinar selectores en uno más específico.

Selector de compuesto

Cuando se usan 2 o más selectores juntos, sin un combinador, para crear un selector más específico.

Terminator

No es un tipo de selector, pero suena como uno, ¿no? 🤖

Recursos

• Referencia de selectores CSS
• Juego de selectores interactivos
• Referencia de pseudoclases y seudoelementos
• Una herramienta que traduce los selectores CSS a explicaciones en inglés sencillo