Selectores

Podcast de CSS - 002: Selectores

Si tienes un 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>

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

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

CSS te brinda muchas opciones para seleccionar elementos y aplicarles reglas que van desde muy simple hasta muy complejo, para ayudar a resolver situaciones como esta.

Las partes de una regla de CSS

Para comprender cómo funcionan los selectores y su rol en las 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 de 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 entre llaves. Una declaración es un par de propiedad y valor que aplica estilos a los elementos que coinciden con los selectores. Una regla de CSS puede tener tantas declaraciones y selectores como desees.

Selectores simples

El grupo de selectores más directo apunta a los elementos HTML y las clases, los IDs y otros atributos que se pueden agregar a una etiqueta HTML.

Selector universal

Navegadores compatibles

• (1)
• (12)
• (1)
• (1)

Origen

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

* {
  color: hotpink;
}

Esta regla hace que todos los elementos HTML de la página tengan texto rosa.

Selector de tipo

Navegadores compatibles

• (1)
• (12)
• (1)
• (1)

Origen

Un selector de tipo coincide directamente con un elemento HTML.

section {
  padding: 2em;
}

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

Selector de clases

Navegadores compatibles

• (1)
• (12)
• (1)
• (1)

Origen

Un elemento HTML puede tener uno o más elementos definidos en su atributo class. El selector de clases coincide con 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 haya aplicado la clase se coloreará de color rojo:

.my-class {
  color: red;
}

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

Un elemento HTML que tenga una clase .my-class coincidirá con la regla de CSS anterior. incluso si tienen muchas otras clases, como esta:

<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 hacer coincidir exactamente la clase.

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

Selector de ID

Navegadores compatibles

• (1)
• (12)
• (1)
• (1)

Origen

Un elemento HTML con un atributo id debe ser el único elemento en una página con ese valor de ID. Seleccionas elementos con una 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, como el siguiente:

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

Al igual que el selector de clases ., Usa un carácter # para indicar a 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, aplicará todas las reglas de CSS que coincidan con su selector. Sin embargo, cualquier elemento que tenga un atributo id debe tener un valor único. Por lo tanto, a menos que escribas una CSS muy específica para un solo elemento, evita aplicar estilos con el selector id, ya que significa que no puedes volver a usar esos estilos en otro lugar.

Selector de atributos

Navegadores compatibles

• (1)
• (12)
• (1)
• (3)

Origen

Puedes buscar elementos que tengan un atributo HTML determinado, o tienen un valor determinado para un atributo HTML con el selector de atributos. Indícale a CSS que busque atributos uniendo el selector con corchetes ([ ]).

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

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

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

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

[data-type] {
  color: red;
}

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

Ambos elementos <div> tendrán texto en rojo.

Puedes usar selectores de atributos que distingan mayúsculas de minúsculas Para ello, agrega un operador s al selector de atributos.

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

Esto significa que si un elemento HTML tenía un data-type de Primary, en lugar de primary, no obtendría un texto rojo. Puedes hacer lo opuesto, insensibilidad entre mayúsculas y minúsculas, con un operador i.

Junto con los operadores de casos, tienes acceso a operadores que hacen coincidir partes de cadenas dentro de 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 "$" de nuestro selector de atributos obtiene el tipo de archivo del atributo "href". Esto permite agregar un prefijo a la etiqueta (en función de ese tipo de archivo) con un seudoelemento.

Selectores de agrupación

Un selector no tiene que coincidir con un solo elemento. Puedes agrupar varios selectores separándolos 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 un elemento que tiene un atributo lang.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre selectores simples

* {}

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

atributo

[] se usan para selectores simples de atributos.

ID

# se usan para selectores simples de ID.

universal

* es el selector simple universal.

clase

. se usan para selectores simples de clase.

div {}

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

clase

Se usa un . para selectores simples de clase.

tipo

Se usa un nombre element para selectores simples de tipo.

atributo

Los corchetes [] se utilizan para los selectores simples de atributos.

ID

Se usa un # para selectores simples de ID.

Pseudoclases y pseudoelementos

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

Pseudoclases

Los elementos HTML se encuentran en varios estados, ya sea porque interactúan, o uno de sus elementos secundarios se encuentra en un estado determinado.

Por ejemplo, un usuario puede colocar el cursor del mouse sobre un elemento HTML. o el usuario también podría colocar el cursor sobre un elemento secundario. En esas situaciones, usa la seudoclase :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 seudoelementos difieren de las pseudoclases porque, en lugar de responder al estado de la plataforma, Estas actúan como si estuvieran insertando un nuevo elemento con CSS. Los seudoelementos también son sintácticamente diferentes de las pseudoclases, porque, en lugar de usar dos puntos (:), usamos dos puntos (::).

Nota: Los dos puntos (::) son lo que distingue a un seudoelemento de una seudoclase, pero debido a que esta distinción no estaba presente en versiones anteriores de las especificaciones de CSS, los navegadores admiten dos puntos para los seudoelementos originales, como :before y :after, para facilitar 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 el prefijo de la etiqueta de un vínculo con el tipo de archivo que era, Puedes usar el seudoelemento ::before para insertar contenido al comienzo de un elemento. o el seudoelemento ::after para insertar contenido al final de un elemento.

Sin embargo, los seudoelementos 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 destacó un usuario.

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

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los pseudoselectores

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

:

Se usa una : para orientar pseudoclases.

::

Se usan dos :: para orientar a los pseudoelementos.

:::

Esto no es válido y no se orienta a nada.

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

¿Qué tipo de seudoselector se utiliza en el fragmento anterior?

Pseudoclase

Se usa una : para orientar pseudoclases.

Pseudoelemento

Se usan dos :: para orientar a los pseudoelementos.

Selectores complejos

Ya viste una amplia variedad de selectores Sin embargo, en ocasiones, necesitarás un control más detallado del CSS. Aquí es donde los selectores complejos intervienen para ayudar.

Vale la pena recordar que, aunque los siguientes selectores nos dan más poder, solo podemos caer en cascada descendente y seleccionar elementos secundarios. No podemos orientar hacia arriba y seleccionar un elemento superior. Hablaremos sobre qué es la cascada y cómo funciona. en una lección posterior.

Combinadores

Una combinadora es lo que se ubica entre dos selectores. Por ejemplo, si el selector era p > strong, la combinación es el carácter >. Los selectores que usan estos combinadores te ayudan a seleccionar elementos según su posición en el documento.

Combinador descendente

Para comprender los combinadores subordinados, primero debes entender los elementos primarios 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>, lo que hace que su contenido se ponga en negrita. Como se encuentra dentro de <p>, es un elemento secundario.

Una combinación descendiente nos permite apuntar a un elemento secundario. Se utiliza un espacio () para indicarle al navegador que busque elementos secundarios:

p strong {
  color: blue;
}

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

Debido a que la combinación descendiente es recursiva, se aplica el padding a cada elemento secundario, lo que genera un efecto escalonado.

Este efecto se visualiza mejor en el ejemplo anterior, con el selector de combinaciones, .top div. Esa regla de CSS agrega padding izquierdo a esos elementos <div>. Debido a que la combinación es recursiva, a todos los elementos <div> que se encuentran en .top se les aplicará el mismo padding.

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

Siguiente combinador del mismo nivel

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

Para agregar espacio entre los elementos apilados, usar la siguiente combinación del mismo nivel para agregar espacio Solo si un elemento es un siguiente elemento del mismo nivel de un elemento secundario de .top.

Podrías agregar margen a todos los elementos secundarios de .top, con el siguiente selector:

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

El problema es que, como seleccionas todos los elementos secundarios de .top, esta regla podría crear espacio extra e innecesario. La siguiente combinación del mismo nivel, junto con un selector universal te permite no solo controlar qué elementos obtienen espacio, pero también aplicar espacio a cualquier elemento. Esto te brinda flexibilidad a largo plazo independientemente de los elementos HTML que aparezcan en .top.

Combinador del mismo nivel posterior

Una combinación posterior es muy similar al siguiente selector del mismo nivel. Sin embargo, en lugar de un carácter +, usa un carácter ~. La diferencia es que un elemento tiene que seguir a otro con el mismo elemento superior en lugar de ser el siguiente elemento con el mismo elemento superior.

Usa un selector posterior junto con una pseudoclase `:checked` para crear un elemento switch de CSS puro.

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

Combinador secundario

Una combinación secundaria (también conocida como elemento subordinado directo) te permite tener más control sobre la recursividad que viene con los selectores de combinaciones. Cuando usas el carácter >, limitas el selector de combinación para que se aplique solo a elementos secundarios directos.

Considera el ejemplo anterior del selector del mismo nivel que sigue. El espacio se agrega a cada siguiente hermano pero si uno de esos elementos también tiene elementos siguientes del mismo nivel como secundarios, se pueden producir espacios extra no deseados.

Para corregir este problema, cambiar el siguiente selector del mismo nivel para incorporar un combinador secundario: > * + * Ahora, la regla 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>, haz lo siguiente: que también tienen 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. Además, solo aplicaría el color rojo a .my-class si estuviera en un elemento <a>. Para obtener más información al respecto, consulta el módulo de especificidad.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre selectores complejos

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

>

La combinación subordinada directa

÷

No es válido. No es un símbolo de CSS.

+

La siguiente combinación del mismo nivel.

*

Este selector simple universal.

.

El selector simple de la clase

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

El selector anterior es un ejemplo de...

Combinador

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

Selector compuesto

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

Terminador

No es un tipo de selector, pero parece que sí lo es. 🤖

Recursos

• Referencia de los selectores CSS
• Juego de selectores interactivos
• Referencia de seudoclases y pseudoelementos
• Una herramienta que traduce los selectores CSS a explicaciones en inglés simple