El podcast de CSS 002: Selectores
Si tienes texto que solo deseas que sea más grande y rojo si se encuentra en 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>
Puedes usar un selector CSS para encontrar ese elemento específico y aplicar una regla de CSS como la siguiente.
article p:first-of-type {
color: red;
font-size: 1.5em;
}
CSS te ofrece muchas opciones para seleccionar elementos y aplicarles reglas, que van desde muy simples hasta muy complejos para ayudar a resolver situaciones como esta.
Las partes de una regla CSS
Para comprender cómo funcionan los selectores y su función en CSS, es importante conocer las partes de una regla de CSS. Una regla de 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 busca 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 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
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 de color activo.
Selector de tipos
Un selector de tipo hace coincidir un elemento HTML directamente.
section {
padding: 2em;
}
Esta regla hace que cada elemento <section> tenga un 2em de padding en todos los lados.
Selector de clases
Un elemento HTML puede tener uno o más artículos definidos en el atributo class.
El selector de clase 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 verá 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 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 los tipos de selector.
Un elemento HTML que tenga una clase .my-class coincidirá con la regla de 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 exactamente con esa clase.
Selector de ID
Un elemento HTML con un atributo id debe ser el único elemento en una página con ese valor de ID.
Selecciona elementos con un selector de ID como el siguiente:
#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 con el selector de clases ., usa un carácter # para indicarle a CSS que busque un elemento que coincida con la id que lo sigue.
Selector de atributos
Puedes buscar elementos que tengan un atributo HTML determinado o que tengan un valor determinado para un atributo HTML con el selector de atributos.
Para indicar a CSS que busque atributos, encierra el selector con corchetes ([ ]).
[data-type='primary'] {
color: red;
}
Este CSS busca todos los elementos que tienen un atributo de data-type con un valor de primary, como el siguiente:
<div data-type="primary"></div>
En lugar de buscar un valor específico de data-type, también puedes buscar elementos que tengan 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 tiene un data-type de Primary, en lugar de primary, no obtendría texto rojo.
Puedes hacer lo contrario (insensibilidad de mayúsculas y minúsculas) con un operador i.
Además de los operadores de caso, tienes acceso a operadores que hacen coincidir partes de strings dentro de los valores de los 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;
}
Agrupación de selectores
Un selector no tiene que coincidir con un solo elemento. Para 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 tenga 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?
[] se usa para selectores simples de atributo.# se usa para selectores simples de ID.* es el selector simple universal.. se usa para selectores simples de clase.div {}
¿Qué tipo de selector simple se usa en el fragmento anterior?
. para selectores simples de clase.element para selectores simples de tipo.[] para los selectores simples de atributo.# para los selectores simples de ID.Pseudoclases y pseudoelementos
CSS proporciona tipos de selectores útiles que se enfocan en estados específicos de la plataforma, como cuando se coloca el cursor sobre un elemento, estructuras dentro de un elemento o partes de él.
Seudoclases
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 cursor sobre un elemento HTML con el puntero del mouse o un elemento secundario también podría hacerlo el usuario.
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 seudoclases.
Seudoelemento
Los seudoelementos difieren de las seudoclases porque, en lugar de responder al estado de la plataforma, actúan como si insertaran un nuevo elemento con CSS.
Los seudoelementos también son sintácticamente diferentes de las seudoclases, ya que, en lugar de usar dos puntos simples (:), usamos los dos puntos dobles (::).
.my-element::before {
content: 'Prefix - ';
}
Al igual que en la demostración anterior, en la que prefijaste 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 ::after para insertar contenido al final de un elemento.
Sin embargo, los seudoelementos no se limitan a la inserción de contenido.
También puedes usarlos para orientar 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 estilo al contenido que un usuario destacó.
::selection {
background: black;
color: white;
}
Obtén más información en el módulo sobre pseudoelementos.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre seudoselectores
¿Cuántos dos puntos utilizan los selectores de seudoelementos?
: para segmentar seudoclases.:: para orientar los pseudoelementos.p:hover {
background: white;
color: black;
}
¿Qué tipo de pseudoselector se usa en el fragmento anterior?
: para segmentar seudoclases.:: para orientar los pseudoelementos.Selectores complejos
Ya viste una gran variedad de selectores, pero, a veces, necesitarás un control más detallado con tu CSS. Aquí es donde intervienen los selectores complejos para ayudar.
Vale la pena recordar que, en este punto, aunque los siguientes selectores nos brindan más poder, solo podemos caer en cascada y seleccionar elementos secundarios. No podemos orientar hacia arriba y seleccionar un elemento principal. 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 era p > strong, el combinador es el carácter >.
Los selectores que usan estas combinaciones te ayudan a seleccionar elementos según su posición en el documento.
Combinador subordinado
Para comprender los combinadores 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>, con lo que se pone en negrita su contenido.
Como se encuentra dentro de <p>, es un elemento secundario.
Un combinador subordinado nos permite orientar a un elemento secundario.
Se usará un espacio () para indicarle al navegador que busque elementos secundarios:
p strong {
color: blue;
}
Este fragmento selecciona todos los elementos <strong> que son secundarios de elementos <p>, por lo que son azules de forma recursiva.
Este efecto se visualiza mejor en el ejemplo anterior con el selector de combinación, .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á 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 siguiente del mismo nivel
Puedes buscar un elemento que siga inmediatamente a otro elemento mediante un carácter + en el selector.
Para agregar espacio entre elementos apilados, usa el siguiente combinador del mismo nivel para agregar espacio solo si un elemento es el siguiente elemento del mismo nivel 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 es que, debido a que seleccionas cada elemento secundario de .top, esta regla puede crear espacio adicional innecesario.
El próximo combinador del mismo nivel, combinado con un selector universal, te permite no solo controlar qué elementos tienen espacio, sino también aplicar espacio a cualquier elemento.
Esto te proporciona flexibilidad a largo plazo, sin importar qué elementos HTML aparezcan en .top.
Combinadora del mismo nivel posterior
Un combinador posterior es muy similar a un selector del mismo nivel.
Sin embargo, en lugar de un carácter +, usa un carácter ~.
La diferencia es que un elemento solo tiene que seguir a otro con el mismo elemento superior, en lugar de ser el siguiente elemento con el mismo elemento superior.
Esta posterior combinación proporciona un poco menos de rigidez, lo que resulta útil en contextos como el del ejemplo anterior, en el que se cambia 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 subordinado directo) te permite tener más control sobre la recursividad que viene con los selectores combinados.
Si usas el carácter >, limitas el selector de combinador para que aplique solo a elementos secundarios directos.
Considera el ejemplo anterior del selector del mismo nivel. El espacio se agrega a cada próximo elemento del mismo nivel, pero si uno de esos elementos también tiene los próximos elementos del mismo nivel como elementos secundarios, es posible que se generen espacios adicionales no deseados.
Para solucionar este problema, cambia el siguiente selector del mismo nivel 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 legibilidad.
Por ejemplo, para orientar elementos <a>, que también tienen una clase de .my-class, escribe lo siguiente:
a.my-class {
color: red;
}
De esta manera, no se aplicaría un color rojo a todos los vínculos y solo se aplicaría el color rojo a .my-class if 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 selectores?
section.awesome {
border: 1px solid hotpink;
}
El selector anterior es un ejemplo de...