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
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
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
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.
Selector de ID
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.
Selector de atributos
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;
}
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?
[]
se usan para selectores simples de atributos.#
se usan para selectores simples de ID.*
es el selector simple universal..
se usan 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.[]
se utilizan para los selectores simples de atributos.#
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 (::
).
.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?
:
para orientar pseudoclases.::
para orientar a los pseudoelementos.p:hover { background: white; color: black; }
¿Qué tipo de seudoselector se utiliza en el fragmento anterior?
:
para orientar pseudoclases.::
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.
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.
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?
section.awesome { border: 1px solid hotpink; }
El selector anterior es un ejemplo de...