En este artículo vamos a explicar qué son los selectores CSS, para qué se utilizan y cómo funcionan en el diseño de páginas HTML. Los selectores permiten a los diseñadores y desarrolladores personalizar la apariencia de elementos individuales o conjuntos de elementos HTML en una página. Podemos emplear diversos tipos de selectores CSS para elegir estos elementos HTML en función de su relación con otros elementos en la página.
Los selectores CSS son una parte fundamental de las hojas de estilo en cascada CSS y se utilizan para aplicar estilos a elementos HTML. Vamos a explicar los selectores CSS más comunes y ver cómo funcionan al aplicar estilos a elementos HTML con algunos ejemplos.
Índice de selectores CSS
Esta lista abarca los selectores CSS más utilizados y frecuentes que puedes utilizar para aplicar estilos a elementos HTML de manera selectiva. Cada selector tiene su propia función y aplicación en el diseño y estilización de páginas web. También se pueden hacer combinaciones entre selectores, pero aquí se explican de forma individual:
- Selector universal
(*) - Selector de elemento
(p/h1/div) - Selector de grupo
(h1, h2, h3) - Selector de clase
(.mi-clase) - Selector de ID
(#mi-id) - Selector de descendencia
(div p) - Selector de hijo
(div > p) - Selector de adyacente
(h1 + p) - Selectores CSS de atributo
[title] - Selectores CSS de atributo y valor
[type="text"] - Selectores CSS de atributo y prefijo
[href^="https://"] - Selectores CSS de atributo y sufijo
[src$=".jpg"] - Selectores CSS de atributo y contenido
[title*="información"] - Selectores CSS de atributo y contenido específico
[title~="información"]
A parte de los selectores CSS también existen los llamados pseudoelementos CSS y las llamadas pseudoclases CSS que se explican en otros artículos. Cada uno de ellos tienen sus propias funciones y aplicaciones en el diseño y estilización de páginas web. Ten en cuenta que es posible hacer combinaciones entre todos ellos, pero aquí solo vamos a explicar el funcionamiento de los selectores CSS de forma individual.
La siguiente lista muestra una ámplia variedad de selectores que puedes utilizar en tus hojas de estilo en cascada para aplicar diseños a elementos HTML de manera selectiva. Cada selector tiene su propia función y aplicación en el diseño y estilización de páginas web.
Selector CSS universal (*)
El selector universal (*) en CSS se utiliza para seleccionar todos los elementos en una página web. Esto significa que cualquier estilo definido dentro del selector universal se aplicará a todos los elementos HTML de la página, a menos que se anule con reglas de estilo más específicas posteriormente. Aquí tienes un ejemplo de cómo se usa el selector universal:
* {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}En este ejemplo se aplican estilos globales a todos los elementos en la página:
margin: 0;Elimina todos los márgenes predeterminados de los elementos, lo que significa que no habrá espacios en blanco alrededor de los elementos.padding: 0;Elimina todos los rellenos predeterminados de los elementos, asegurando que no haya espacio adicional dentro de los elementos.box-sizing: border-box;Establece el modelo de caja en «border-box» para todos los elementos. Esto significa que el tamaño total de un elemento incluirá su contenido y su borde, sin cambios inesperados en el diseño debido al relleno o el borde.
La aplicación HTML de los estilos CSS definidos sería:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector Universal</title>
</head>
<body>
<header>
<h1>Título del Sitio Web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<section>
<h2>Sección Principal</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>
</main>
<footer>
<p>Derechos de autor © 2023</p>
</footer>
</body>
</html>
El resultado consistirá en una página web donde todos los elementos HTML tendrán los estilos globales definidos conb el selector Universal. Estos estilos globales afectarán a todos los elementos en la página, estableciendo márgenes, rellenos y el modelo de caja para que todos los elementos sigan estas reglas predeterminadas. Esto proporciona una base consistente para el diseño de la página web.
Selector de elemento (p/h1/div)
El selector de elemento en CSS se utiliza para aplicar estilos a elementos HTML específicos en función de su tipo o nombre. Un ejemplo CSS que utiliza el selector de elemento sería el siguiente:
/* Estilo para párrafos */
p {
font-size: 16px;
color: #333;
}
/* Estilo para encabezados de nivel 1 */
h1 {
font-size: 24px;
color: #ff6600;
}
/* Estilo para elementos div con clase "mi-div" */
div.mi-div {
background-color: #f2f2f2;
border: 1px solid #ccc;
}Las reglas definidas harían lo siguiente:
- El selector
pse utiliza para aplicar estilos a todos los elementos<p>(párrafos) en la página, estableciendo el tamaño de fuente y el color de texto. - El selector
h1se utiliza para aplicar estilos a todos los elementos<h1>(encabezados de nivel 1) en la página, cambiando el tamaño de fuente y el color del texto. - El selector
div.mi-divse utiliza para aplicar estilos a todos los elementos<div>que tengan la clase «mi-div», estableciendo el color de fondo y un borde.
La aplicación HTML de los estilos CSS definidos sería:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Elemento</title>
</head>
<body>
<h1>Título Principal</h1>
<p>Este es un párrafo de ejemplo.</p>
<div class="mi-div">
<p>Otro párrafo dentro de un div con clase "mi-div".</p>
</div>
<p>Este es otro párrafo.</p>
</body>
</html>En este ejemplo HTML, se aplican los estilos definidos en el archivo CSS a elementos específicos en la página. Los encabezados <h1> se verán de un color y tamaño de fuente específicos, los párrafos <p> tendrán su propio estilo, y los elementos <div> con la clase «mi-div» también tendrán sus propios estilos. Esto permite personalizar la apariencia de elementos específicos en la página web.
Selector de grupo (h1, h2, h3)
El selector de grupo en CSS permite aplicar un conjunto de estilos comunes a varios selectores de elementos diferentes. Los selectores de elementos se separan por comas y, cuando se aplica un estilo, afectará a todos los elementos seleccionados por cualquiera de los selectores en el grupo. Un ejemplo de CSS que utiliza el selector de grupo sería:
/* Estilos para encabezados h1, h2 y h3 */
h1, h2, h3 {
color: #333; /* Cambia el color de texto a gris */
font-weight: bold; /* Hace que el texto sea negrita */
}En este ejemplo de CSS:
- El selector de grupo
h1, h2, h3selecciona todos los encabezados<h1>,<h2>y<h3>en la página.
Ejemplo HTML de aplicación del selector de grupo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Grupo</title>
</head>
<body>
<h1>Este es un encabezado h1</h1>
<p>Este es un párrafo.</p>
<h2>Este es un encabezado h2</h2>
<h3>Este es un encabezado h3</h3>
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS h1, h2, h3 se aplicarán a todos los encabezados <h1>, <h2> y <h3> en la página. Los encabezados afectados tendrán un color de texto gris y un estilo de fuente negrita debido a esta regla.
El selector de grupo es útil cuando deseas aplicar los mismos estilos a múltiples elementos de manera eficiente, en lugar de definir reglas separadas para cada selector de elemento individualmente.
Selector de clase (.mi-clase)
El selector de clase en CSS se utiliza para aplicar estilos a elementos HTML a los que se quiere aplicar unas reglas de una clase específica. Un ejemplo CSS que utiliza el selector de clase sería:
/* Definición de una clase llamada "mi-clase" */
.mi-clase {
color: #ff6600; /* Cambia el color del texto */
font-weight: bold; /* Hace que el texto sea negrita */
}En este ejemplo se define una clase CSS llamada «mi-clase» que se utilizará para aplicar estilos específicos a elementos HTML cuando se les asigne esta clase.
Ejemplo de aplicación de la clase a elementos HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Clase</title>
</head>
<body>
<p>Este es un párrafo de texto normal.</p>
<p class="mi-clase">Este párrafo tiene la clase "mi-clase" y se ve diferente.</p>
<p>Este es otro párrafo de texto normal.</p>
</body>
</html>En este ejemplo HTML, se aplica la clase «mi-clase» al segundo párrafo utilizando el atributo class. Como resultado, el segundo párrafo hereda los estilos definidos en el CSS para la clase «mi-clase». En este caso, el texto se vuelve de color naranja (#ff6600) y se hace negrita debido a la clase aplicada.
El selector de clase es muy útil para aplicar estilos específicos a elementos HTML sin depender de su tipo o etiqueta. Puedes aplicar la misma clase a múltiples elementos en una página y darles un estilo consistente.
Selector de ID (#mi-id)
El selector de ID en CSS se utiliza para aplicar estilos a un elemento HTML específico que tiene un atributo id único. Un ejemplo CSS que utiliza el selector de ID sería:
/* Definición de un ID llamado "mi-id" */
#mi-id {
background-color: #ff6600; /* Cambia el color de fondo */
color: #fff; /* Cambia el color del texto */
font-size: 18px; /* Cambia el tamaño de fuente */
padding: 10px; /* Agrega relleno alrededor del elemento */
}En este ejemplo se define un ID llamado «mi-id» que se utilizará para aplicar estilos específicos a un elemento HTML que tenga este ID.
La aplicación HTML sería:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de ID</title>
</head>
<body>
<div id="mi-id">
<p>Este es un elemento con el ID "mi-id".</p>
</div>
<p>Este es otro párrafo de texto normal.</p>
</body>
</html>En este ejemplo HTML, se aplica el ID «mi-id» al elemento <div> utilizando el atributo id. Como resultado, el elemento <div> hereda los estilos definidos en el CSS para el ID «mi-id». El fondo se vuelve naranja (#ff6600), el texto se vuelve blanco (#fff), el tamaño de fuente se ajusta y se agrega relleno alrededor del elemento.
El selector de ID se utiliza cuando se necesita aplicar estilos específicos a un elemento único en una página web, ya que los IDs deben ser únicos dentro del documento HTML. Esto lo hace útil para elementos que deben destacar o tener estilos especiales.
Selector de descendencia (div p)
El selector de descendencia en CSS se utiliza para aplicar estilos a elementos secundarios que están anidados dentro de un elemento primario, sin importar su nivel de anidación. Se usa con un espacio entre los selectores para indicar la relación de padre e hijo entre los elementos. Un ejemplo de CSS que utiliza el selector de descendencia sería:
/* Estilos para párrafos dentro de un div */
div p {
color: #333;
font-size: 16px;
}En este ejemplo de CSS:
- El selector
div pse utiliza para aplicar estilos a todos los elementos<p>(párrafos) que están anidados dentro de un elemento<div>. Estos estilos afectarán a todos los párrafos dentro de cualquier nivel de anidación dentro de un<div>.
La aplicación del selector de descendencia en HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Descendencia</title>
</head>
<body>
<div>
<p>Este es un párrafo dentro de un div.</p>
<p>Este es otro párrafo dentro del mismo div.</p>
<div>
<p>Este párrafo también está dentro del primer div</p>
</div>
</div>
<p>Este es un párrafo fuera del div.</p>
</body>
</html>En este ejemplo HTML, los estilos definidos en el CSS para div p se aplicarán a todos los párrafos que están dentro de un <div>. Por lo tanto, los tres primeros párrafos dentro del div tendrán los estilos especificados, mientras que el cuarto párrafo (fuera del div) no se verá afectado por esos estilos.
El selector de descendencia es útil para aplicar estilos selectivamente a elementos descendientes en función de su estructura de anidación en el documento HTML. Esto permite una mayor flexibilidad en la personalización de la apariencia de diferentes partes de una página web.
Selector de hijo (div > p)
El selector de hijo en CSS, representado por el símbolo > se utiliza para aplicar estilos solo a elementos que son hijos directos de otro elemento específico. Esto significa que los estilos se aplicarán solo a los elementos que son inmediatamente secundarios del elemento principal. Un ejemplo CSS que utiliza el selector de hijo sería:
/* Estilos para párrafos que son hijos directos de un div */
div > p {
color: #ff6600; /* Cambia el color de texto a naranja */
font-weight: bold; /* Hace que el texto sea negrita */
}En este ejemplo de CSS:
- El selector
div > pse utiliza para aplicar estilos solo a los elementos<p>(párrafos) que son hijos directos de un elemento<div>. Esto significa que los párrafos que estén anidados a niveles adicionales dentro del div no se verán afectados por estos estilos.
Ejemplo de aplicación HTML del selector de hijo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Hijo</title>
</head>
<body>
<div>
<p>Este es un párrafo hijo directo de un div.</p>
<div>
<p>Este párrafo está anidado en un div, pero no es hijo directo del div principal.</p>
</div>
<p>Este es otro párrafo hijo directo de un div.</p>
</div>
</body>
</html>En este ejemplo HTML, los estilos definidos en el CSS para div > p se aplicarán solo a los párrafos que son hijos directos del elemento <div>. El primer y tercer párrafo en el ejemplo cumplen con esta condición y, por lo tanto, tendrán los estilos especificados, mientras que el segundo párrafo anidado en otro div no se verá afectado por estos estilos.
El selector de hijo es útil cuando deseas aplicar estilos solo a elementos que son directamente descendientes de otro elemento específico, sin afectar a elementos más profundamente anidados.
Selector de adyacente (h1 + p)
El selector de adyacente en CSS, representado por el signo más +, se utiliza para aplicar estilos a un elemento que es adyacente y sigue inmediatamente a otro elemento específico. Un ejemplo de CSS que utiliza el selector de adyacente sería:
/* Estilos para un párrafo que sigue inmediatamente a un h1 */
h1 + p {
font-weight: bold; /* Hace que el texto sea negrita */
color: #ff6600; /* Cambia el color de texto a naranja */
}En este ejemplo de CSS:
- El selector
h1 + pse utiliza para aplicar estilos al primer párrafo (<p>) que sigue inmediatamente a un encabezado de nivel 1 (<h1>) en el mismo nivel de anidación.
Ejemplo de aplicación HTML del selector de adyacente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Adyacente</title>
</head>
<body>
<h1>Título Principal</h1>
<p>Este párrafo sigue inmediatamente al encabezado h1 y será afectado por los estilos.</p>
<p>Este es otro párrafo, pero no sigue directamente al encabezado h1 y no será afectado por los estilos.</p>
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS h1 + p se aplicarán solo al primer párrafo (<p>) que sigue inmediatamente al encabezado de nivel 1 (<h1>). Por lo tanto, el primer párrafo se volverá negrita y tendrá un color de texto naranja debido a esta regla, mientras que el segundo párrafo no se verá afectado porque no sigue directamente al encabezado h1.
El selector de adyacente es útil para aplicar estilos a elementos que están inmediatamente relacionados en el mismo nivel de anidación, lo que permite una personalización específica y granular en tu diseño web.
Selectores CSS de atributo [title]
El selector de atributo en CSS te permite seleccionar elementos que tengan un atributo HTML específico, independientemente del valor de ese atributo. Se utiliza con la notación [atributo], donde "atributo" es el nombre del atributo que deseas seleccionar. Un ejemplo de CSS que utiliza el selector de atributo sería:
/* Estilos para elementos con el atributo title */
[title] {
color: #ff0000; /* Cambia el color de texto a rojo */
font-weight: bold; /* Hace que el texto sea negrita */
}En este ejemplo de CSS:
- El selector
[title]selecciona todos los elementos que tengan un atributotitle.
Ejemplo HTML de aplicación del selector de atributo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Atributo</title>
</head>
<body>
<p title="Información importante">Este es un párrafo con atributo title.</p>
<a href="https://www.ejemplo.com">Enlace sin atributo title</a>
<div>Otro elemento sin atributo title.</div>
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS [title] se aplicarán a todos los elementos que tengan un atributo title. En este caso, el párrafo se verá afectado por esta regla y tendrá un color de texto rojo y un estilo de fuente negrita debido a la regla CSS, mientras que los otros elementos que no tienen un atributo title no se verán afectados.
Selectores CSS de atributo y valor [type="text"]
El selector de atributo en CSS se utiliza para aplicar estilos a elementos que tienen un atributo HTML específico con un valor particular. Un ejemplo CSS que utiliza el selector de atributo sería:
/* Estilos para elementos de entrada de tipo "text" */
input[type="text"] {
border: 1px solid #ccc; /* Establece un borde gris claro */
padding: 5px; /* Agrega un relleno de 5px */
font-size: 14px; /* Cambia el tamaño de fuente a 14px */
}En este ejemplo de CSS:
- El selector
input[type="text"]se utiliza para aplicar estilos a todos los elementos<input>que tienen un atributotypecon el valor «text». Esto es comúnmente utilizado para estilizar campos de entrada de texto en formularios HTML.
Ejemplo HTML de aplicación del selector de atributo y valor:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Atributo</title>
</head>
<body>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="correo">
</form>
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS input[type="text"] se aplicarán solo al campo de entrada de texto que tiene el atributo type con el valor «text». En este caso, el campo de entrada de texto para el nombre se verá afectado por esta regla debido a su atributo type, mientras que el campo de entrada de correo electrónico no se verá afectado porque tiene un atributo type diferente.
El selector de atributo es útil para personalizar elementos específicos en función de los valores de sus atributos, lo que permite una mayor flexibilidad en la estilización de tu página web.
Selectores CSS de atributo y prefijo [href^="https://"]
El selector de atributo de prefijo en CSS permite seleccionar elementos que tienen un atributo con un valor que comienza con una cadena de texto específica. Se utiliza con la notación [atributo^="valor"], donde "valor" es la cadena de texto que se utiliza como prefijo. Un ejemplo de CSS que utiliza el selector de atributo de prefijo sería:
/* Estilos para enlaces cuyo atributo href comienza con "https://" */
a[href^="https://"] {
color: #0077cc; /* Cambia el color de texto a azul para enlaces seguros */
text-decoration: underline; /* Subraya los enlaces */
}En este ejemplo de CSS:
- El selector
a[href^="https://"]selecciona todos los enlaces (<a>) cuyo atributohrefcomienza con «https://».
Ejemplo HTML de aplicación del selector de atributo y prefijo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Atributo de Prefijo</title>
</head>
<body>
<a href="https://www.ejemplo.com">Enlace seguro</a>
<a href="http://www.ejemplo2.com">Enlace no seguro</a>
<a href="https://www.otroejemplo.com">Otro enlace seguro</a>
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS a[href^="https://"] se aplicarán solo a los enlaces cuyo atributo href comience con «https://». En este caso, el primer y tercer enlace se verán afectados por esta regla y tendrán un color de texto azul y un subrayado, mientras que el segundo enlace no se verá afectado porque su atributo href no comienza con «https://».
Selectores CSS de atributo y sufijo [src$=".jpg"]
El selector de atributo de sufijo en CSS permite seleccionar elementos que tienen un atributo con un valor que termina con una cadena de texto específica. Se utiliza con la notación [atributo$="valor"], donde "valor" es la cadena de texto que se utiliza como sufijo. Un ejemplo de CSS que utiliza el selector de atributo de sufijo sería:
/* Estilos para imágenes cuyo atributo src termina con ".jpg" */
img[src$=".jpg"] {
border: 2px solid #ccc; /* Agrega un borde gris claro a las imágenes .jpg */
max-width: 100%; /* Limita el ancho máximo de las imágenes */
}En este ejemplo de CSS:
- El selector
img[src$=".jpg"]selecciona todas las imágenes (<img>) cuyo atributosrctermina con «.jpg».
Ejemplo HTML de aplicación del selector de atributo y sufijo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Atributo de Sufijo</title>
</head>
<body>
<img src="imagen1.jpg" alt="Imagen 1">
<img src="imagen2.png" alt="Imagen 2">
<img src="imagen3.jpg" alt="Imagen 3">
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS img[src$=".jpg"] se aplicarán solo a las imágenes cuyo atributo src termina con «.jpg». En este caso, la primera y la tercera imagen se verán afectadas por esta regla y tendrán un borde gris claro y un ancho máximo limitado, mientras que la segunda imagen no se verá afectada porque su atributo src no termina con «.jpg».
Selectores CSS de atributo y contenido [title*="información"]
El selector de atributo de contenido en CSS permite seleccionar elementos que tienen un atributo con un valor que contiene una cadena de texto específica en cualquier parte de ese valor. Se utiliza con la notación [atributo*="valor"], donde "valor" es la cadena de texto que se busca en el atributo. Un ejemplo de CSS que utiliza el selector de atributo de contenido sería:
/* Estilos para elementos con el atributo title que contiene "información" */
[title*="información"] {
background-color: #ffffcc; /* Cambia el color de fondo a amarillo claro */
border: 1px solid #ccc; /* Agrega un borde gris claro */
padding: 5px; /* Agrega un relleno de 5px */
}En este ejemplo de CSS:
- El selector
[title*="información"]selecciona todos los elementos que tienen un atributotitleque contiene la palabra «información» en cualquier parte del valor del atributo.
Ejemplo HTML de aplicación del selector de atributo y contenido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Atributo de Contenido</title>
</head>
<body>
<p title="Más información aquí">Haga clic para obtener más información.</p>
<div title="Información importante">Este es un elemento con información importante.</div>
<p>No se aplica ningún título aquí.</p>
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS [title*="información"] se aplicarán solo a los elementos que tienen un atributo title que contiene la palabra «información» en cualquier parte del valor del atributo. En este caso, los párrafos y el div con atributos title que contienen «información» tendrán un fondo amarillo claro, un borde gris claro y un relleno de 5px. El último párrafo no se verá afectado porque no tiene un atributo title que contenga «información».
Selectores CSS de atributo y contenido específico [title~="información"]
El Selector de Atributo de Contenido específico en CSS, representado como [atributo~="valor"], se utiliza para seleccionar elementos que tienen un atributo específico con un valor que contiene una palabra específica en cualquier parte de ese valor, donde la palabra debe estar rodeada por espacios o caracteres no alfabéticos. Un ejemplo de CSS que utiliza este selector sería:
/* Estilos para elementos con el atributo title que contiene la palabra "información" */
[title~="información"] {
color: #0077cc; /* Cambia el color de texto a azul para estos elementos */
font-weight: bold; /* Hace que el texto sea negrita */
}En este ejemplo de CSS:
- El selector
[title~="información"]selecciona todos los elementos que tienen un atributotitledonde el valor contiene la palabra «información» como parte de ese valor, rodeada de espacios u otros caracteres no alfabéticos.
Ejemplo HTML de aplicación del selector de atributo y contenido específico:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Ejemplo de Selector de Atributo de Contenido</title>
</head>
<body>
<p title="Más información aquí">Haga clic para obtener más información.</p>
<a href="https://www.ejemplo.com">Enlace sin atributo title</a>
<div title="Información importante">Este es un elemento con información importante.</div>
</body>
</html>En este ejemplo HTML, los estilos definidos en la regla CSS [title~="información"] se aplicarán solo a los elementos que tienen un atributo title cuyo valor contiene la palabra «información» como parte de ese valor, independientemente de su posición en el atributo o de los caracteres circundantes. En este caso, el párrafo y el div se verán afectados por esta regla y tendrán un color de texto azul y un estilo de fuente negrita debido a esta regla. El enlace no se verá afectado porque no tiene un atributo title que cumpla con esta condición.
Resumen sobre selectores CSS
Los selectores en CSS son herramientas fundamentales para apuntar a elementos HTML específicos y aplicar estilos a esos elementos. Estos selectores permiten una gran flexibilidad en la selección de elementos, lo que te brinda un control preciso sobre la apariencia y el diseño de tu página web.
Los selectores se pueden combinar con Pseudoelementos y Pseudoclases para lograr un control aún más granular. Esta combinación de selectores, pseudoelementos y pseudoclases permite aplicar estilos de manera más precisa y dinámica a los elementos HTML, lo que resulta en diseños web efectivos y atractivos.
Al comprender y utilizar estos conceptos, puedes controlar completamente la apariencia de tu página web y mejorar la experiencia del usuario. Estos son algunos ejemplos de cómo se pueden usar selectores en CSS para aplicar estilos a elementos HTML según su relación con otros elementos en el documento.
Ahora puedes combinar estos selectores con operadores de Pseudoelementos y PseudoClases y experimentar sobre todas las opciones posibles. Lo que sin duda te ayudará a ser más específico en la selección de elementos y aplicar estilos de manera más precisa a tu diseño web.
¡ Espero que este artículo sea de vuestro interés !