En este post te hablaré de un tema muy importante en el desarrollo web y en específico, en el diseño y estilización de páginas web, me refiero a los selectores en CSS, este es un tema que debes manejar si es que quieres tener presencia en el mundo del desarrollo web, por eso hoy, intentaré explicarte de la forma más clara posible todos los aspectos claves para entender correctamente el funcionamiento de los selectores en CSS. Ya que, si dominas a un nivel discente el mismo, no tendrás problemas para crear proyectos de gran envergadura 

Espero que estés listo, ya que veremos si no todos, por lo menos la mayoría de los selectores que se utilizan en la mayoría de los proyectos en el mundo real, veremos temas como los selectores básicos, como ser selector universal, selector de tipo, entre otros, también veremos selectores avanzados como las pseudo-clases y pseudo-elementos, así que, se viene un desarrollo muy interesante, por eso, te invito a que te quedes y sigan leyendo, te aseguro que los minutos que inviertas leyendo este post, no tendrán desperdicio.  

¿Qué son los selectores en CSS? 

Comencemos por preguntarnos que son los selectores en CSS, pues un selector como su nombre lo indica, selecciona uno o más elementos para aplicarles estilos y cambiar su apariencia, imagina que un selector es el enlace que conecta a los elementos HTML, por tanto, mediante los selectores se hace posible la presentación visual de los elementos que pasan de su aspecto por defecto, a una apariencia más vistosa y colorida  

Los selectores cuentan con una estructura bien definida, la cual, está compuesta por un conjunto llamado “reglas de estilo” seguido de un par de llave “() “, dentro de aquí, es donde se conformará la regla aplicada a determinado elemento o conjunto de elementos  

Los estilos son definidos mediante propiedades, las propiedades son las características que presentaran los elementos HTML, como color, padding, marging, border, etc. Mientras que, a las características en concreto, como, red, 2px, 2px 1px, se les denomina valores, los cuales serán el resultado final mostrado por el navegador.  

Tipos de selectores 

Los selectores en CSS pueden clasificarse en varios tipos, desde los más básicos hasta los avanzados: 

Selectores básicos:  

• Selectores de tipo (cualquier elemento HTML) 
• Selectores de clase 
• Selectores de ID
• Selector universal 

Selectores avanzados:  

• Selectores de atributo
• Pseudo-clases
• Pseudo-elementos
• Selectores combinadores 

Sintaxis básica de un selector 

Cada regla CSS sigue una estructura estándar, que incluye un selector y un bloque de declaración que define los estilos aplicados: 
  

Donde:  

• Selector: elige el/los elemento(s) HTML que recibirán los estilos. 
• Propiedad: define la característica que quieres modificar (por ejemplo, color, tamaño de fuente, margen, etc.).
• Valor: especifica el valor de la propiedad elegida. 

Por ejemplo, si quieres seleccionar todos los párrafos en una página y cambiar su color a azul, la regla sería: 

p { 
    color: blue; 
} 

La importancia de los selectores en el diseño web 

Los selectores son el corazón de CSS. Sin ellos, no habría manera de enlazar el estilo con el contenido. Además de aplicar estilos, los selectores nos permiten hacer lo siguiente: 

• Reutilización de estilos: Un selector puede apuntar a varios elementos al mismo tiempo, permitiendo que compartan el mismo estilo. Esto permite mantener el código CSS limpio.
• Especificidad: Al utilizar diferentes selectores, puedes controlar con precisión cuáles elementos deben verse de una manera particular. Cuanto más específico sea el selector, mayor prioridad tendrá el estilo aplicado.
• Organización y claridad: CSS se vuelve más manejable cuando usas selectores correctamente, permitiendo que tu código sea legible y fácil de modificar.  

¿Por qué es esencial comprender los selectores? 

Los selectores son uno de los primeros pasos para dominar CSS, pero su aplicación no se limita a los sitios web simples.

Una vez que comprendes cómo seleccionar elementos con precisión, puedes comenzar a trabajar en proyectos más complejos, como frameworks de CSS, aplicaciones dinámicas y diseño responsivo. Recuerda lo que mencioné arriba: si quieres sobresalir en este mundo, el dominio a un nivel decente de los selectores es indispensable.

¿Pero, a qué nivel debo de entender los selectores? 

Como desarrollador web debes de tener cierto nivel en el manejo de diversas técnicas que quieras o no pondrás en práctica más temprano que tarde, y el manejo correcto y adecuado de los selectores no es la excepción, ya que si controlas a fondo la aplicación de estilos mediante selectores sin confundirte y sin crear estilos redundantes, puedes considerarte un PRO en este aspecto, por ese motivo, entender a fondo los selectores te permitirá: 

• Optimizar tu código: Utilizar selectores más eficientes para que tu código CSS sea más rápido y sencillo. 
• Evitar conflictos de estilo: Aprender cómo evitar que tus estilos se sobrescriban entre sí. 
• Aprovechar selectores avanzados: Los selectores avanzados ofrecen un mayor control en situaciones complejas, como en el caso de los formularios interactivos o diseños que cambian dinámicamente. 

Selectores de tipo y selector universal 

Selector Universal (*) 

El selector universal (*) es uno de los selectores más simples de manejar en CSS, este tipo de selector, selecciona todos los elementos en un documento HTML, sin importar su tipo, clase, o ID, es decir, que con una misma regla de estilo puedes dar formato a toda una página web completa, aunque esto implique un riesgo cuando se trata de un proyecto web serio. Su sintaxis es muy simple: 

* { 
    propiedad: valor; 
} 

¿En qué casos es útil el selector universal? 

El selector universal puede resultar útil en varias situaciones, por ejemplo: 

• Resetear o reestablecer los estilos actuales: 

Una de las situaciones más comunes donde utilizamos el selector universal, es para restablecer o normalizar los márgenes y padding de todos los elementos al mismo valor, que los navegadores aplican a las páginas web por defecto, veamos un ejemplo: 

Ejemplo

El siguiente ejemplo de código elimina cualquier margen y padding predeterminado de los elementos, y establece box-sizing: border-box, lo que asegura que el ancho y alto de los elementos incluyan el padding y bordes en su cálculo. 

Por tanto, el resultado final será que todos los elementos se pegarán sin dejar ningún espacio ni margen entre ellos.

CSS

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nuestra tienda</title>
</head>
<body>
    <h2>Nuestra tienda</h2>

    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident inventore aliquam, aliquid laborum doloremque corporis! labore temporibus.
    </p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia suscipit aperiam tempora nesciunt culpa minus doloribus adipisci! Blanditiis facere illo eaque beatae vero corrupti dolorum?</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero natus incidunt  sint veritatis error in dicta.</p>
    
    <section>
        <h2>Productos</h2>
    </section>

    <section>
        <h2>Testimnios</h2>
    </section>

    <section>
        <h2>Contacto</h2>
    </section>
</body>
</html>

• Aplicación de estilos globales

El segundo caso donde nos sería útil el uso del selector universal es cuando sea necesario aplicar un estilo a todos los elementos de la página. Por ejemplo, cambiar el color del texto de todos los elementos a rojo, aplicar un tipo o estilo de fuente diferente, o definir un fondo cualquiera.  

Ejemplo

En este ejemplo cambiaremos todos los elementos entre ellos párrafos, encabezados, y otros, aún mismo color, en este caso, cambiaremos todos a color rojo y eso lo lograremos por medio de la siguiente regla de estilo: 

CSS

* { 
    color: red; 
}  

HTML

    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Prov labore temporibus.
    </p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia suscipit aperiam tempora nesciunt culpa minus doloribus adipisci! Blanditiis facere illo eaque beatae vero corrupti dolorum?</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero natus incidunt Ipsum sint veritatis error in dicta.</p>
    
    <section>
        <h2>Productos</h2>
    </section>

    <section>
        <h2>Testimnios</h2>
    </section>

    <section>
        <h2>Contacto</h2>
    </section>

¿Qué precauciones tener al usar el selector universal? 

Debes tener en cuenta que al usar el selector universal pueden generarse situaciones que podrían llegar a ser muy obvias, ya que, si estás trabajando en proyectos grandes, no se recomienda su uso, pues el desastre sería inminente, por tanto, si te sientes tentado a utilizarlo, se recomienda hacerlo en proyectos de bajo nivel, o al inicio de la creación de un documento HTML, siempre y cuando sepas lo que eso implique, o en todo caso, en un entorno que esté controlado, en donde si ocurre algo inesperado, no tengas dificultad para solventar cualquier inconveniente. 

Selectores de tipo (elementos HTML) 

Ahora corresponde hablar de los selectores de tipo, conocidos también como selectores de etiqueta, a este tipo de selector corresponden todos los elementos HTML. Y funciona de la siguiente manera:  

Selecciona todos los elementos HTML de un tipo en particular, por ejemplo, p, h1, div, span, section, aside, etc.

A diferencia del selector universal, que selecciona todos los elementos HTML de una página web, los selectores de tipo te permiten apuntar a elementos específicos basados en su nombre de etiqueta HTML. Por tanto, las reglas de estilo aplicadas con este tipo de selector se vuelven más directas 

Sintaxis 

etiqueta_html { 
    propiedad: valor; 
} 
para 

Para que se entienda mejor, veámoslo con ejemplos:

Ejemplos 1 

En este ejemplo, indiquemos mediante la regla de estilo, que todos los párrafos sean de color verde, esto lo haríamos de la siguiente manera: 

CSS

p { 
    color: green; 
} 

HTML

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident quibusdam l</p>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia suscipit aperiam tempora nesciunt culpa minus doloribus adipisci! Blanditiis facere illo eaque beatae vero corrupti dolorum?</p>

    <p>Lorem rerum! Ipsum sint veritatis error in dicta.</p>
    
<section>
     <h2>Productos</h2>
</section>
<section>
     <h2>Testimnios</h2>
</section>

<section>
    <h2>Contacto</h2>
</section>

Como  puedes ver, esta definición es bastante simple, hacemos uso del elemento <p> de HTML, donde definimos que todos los párrafos existentes en la página serán de color verde.  Sin afectar a los demas elementos entre elllos, encabezados y contenedores divs
  

Ejemplos 2 

Ahora indiquemos a CSS que pinte todos los encabezados h2 de color anaranjado; esto pintará únicamente a los elementos h2 sin tocar a los párrafos. Eso sería tan simple como definir la siguiente regla:

CSS

h2 { 
     color: orange; 
} 

HTML

    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident inventore aliquam, aliquid laborum doloremque corporis! labore temporibus.
    </p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. voluptates similique deleniti autem obcaecatm?</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero natus Ipsum sint veritatis error in dicta.</p>

<section>
  <h2>Productos</h2>
</section>

<section>
  <h2>Testimnios</h2>
</section>

<section>
  <h2>Contacto</h2>
</section>

Estilos básicos y específicos en CSS?  

Los selectores de tipo son fundamentales para aplicar estilos generales a tipos de elementos en todo el documento. Por ejemplo, podrías tener estilos básicos para párrafos, encabezados y divs que se aplican de manera global, y luego agregar reglas más específicas utilizando selectores de clase o ID. 

En CSS, los estilos básicos aplicados a elementos HTML se refieren a las reglas que se definen a través de selectores genéricos como el tipo de elemento (por ejemplo, p, div, h1). Estos estilos afectan a todos los elementos de ese tipo dentro del documento. 

Por otro lado, los estilos específicos se aplican a través de selectores más precisos, como clases (.clase), IDs (#id), o combinaciones más complejas (por ejemplo, div p o ul li:first-child), lo que permite estilizar de manera más detallada un conjunto específico de elementos o incluso un solo elemento en particular. 

La diferencia clave entre estas dos formas de aplicar estilos, radica en el nivel de precisión: los estilos básicos afectan a todos los elementos de un tipo, mientras que los específicos se aplican solo a ciertos elementos seleccionados mediante selectores más refinados.  

Aquí están algunos estilos básicos que podrías aplicar a elementos HTML 

• color 
• background-color
• font-size 
• font-family
• text-align 
• margin 
• padding 
• border 
• Width 
• Height 
• display 
• text-decoration 

Y estos ya serían algunos estilos específicos que podrías aplicar  cuando sea requerido  

• box-shadow 
• border-radius
• text-shadow 
• background-image
• background-position
• transform 
• transition 
• animation 
• opacity 
• filter 
• z-index 
• clip-path 

Veamos algunos ejemplos de aplicación de estilos generales o comunes:  

Ejemplo 1 – aplicar estilos generales a todos los párrafos de la página  

En este ejemplo observa que estamos definiendo que todos los párrafos de la página tendrán un tipo de fuente font-family “Arial sans-serif”, un tamaño de fuente font-size de 16px y background de color lightblue; recuerda que esto aplicaría a todos los párrafos independientemente de la cantidad que contenga la página web.

HTML

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque consectetur ratione commodi blanditiis similique! Facilis, iure repellat. Reprehenderit, mollitia omnis!</p>
    
<p>Voluptatum, facere fugit explicabo veniam maiores itaque odit placeat laborum adipisci error.</p>
    
<p>Expedita minima non eveniet velit. Soluta aperiam laudantium praesentium molestias voluptatum quaerat corrupti veritatis?</p>
    
<p>Eaque iusto ad quasi voluptatem hic, doloremque natus mollitia consectetur, repudiandae minima fugiat sunt aperiam libero reiciendis eum aspernatur corporis?</p>

CSS

/* Aplicar estilos generales a los elementos comunes */ 
p { 
    font-family: 'Arial', sans-serif; 
    font-size: 16px; 
    background-color: lightblue;
} 

Ejemplo 2 – aplicar estilos generales a encabezados que comparten estilos  

En este ejemplo definimos que tanto h1, h2, h3, h4, h5 como h6 tendrán el mismo tipo de fuente y color, si te fijas, cada selector está separado por una coma (,), está es la forma más eficiente de aplicar estilos a varios elementos a la vez, a esto le llamaremos selectores de grupo, (lo veremos en breve), y así, evitamos crear código redundante o duplicado  

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Georgia', serif; 
    color: darkblue; 
} 

Ejemplo 3 – aplicar estilos generales a contenedores (divs)  

En este ejemplo definimos que todos los divs de la página tengan un padding de 20px y un borde de 2px será sólidos y tendrá el color de fondo rojo y color de texto interno #fff (blanco).

De esta forma cambiamos el aspecto de toda la página si es que la misma cuenta con muchos divs  

CSS

div {
  padding: 20px;
  border: 2px solid #ccc;
  color: #fff;
  background-color: red; 
}

HTML

<div>
  <p>contenedor 1</p>
</div>

<div>
  <p>contenedor 3</p>
</div>

<div>
  <p>contenedor 3</p>
</div>

<div>
  <p>contenedor 4</p>
</div>

Aplicación de estilos específicos  

Los estilos específicos son aquellos que dan características únicas a ciertos elementos, ya sea para destacarlos visualmente o para agregar efectos avanzados. Se utilizan para diferenciar ciertos elementos o crear interacciones visuales más complejas. 

Ejemplo 

En este ejemplo, el estilo aplicado a .card es específico: incluye border-radius para redondear esquinas, box-shadow para darle sombra y transform con transition para darle un comportamiento especial al hacer hover. También he agregado un cursor: pointer, para que al pasar el puntero sobre el div, este se convierta en manito señalando el elemento.

Son características visuales que no se aplicarían globalmente a todos los div, sino solo a este caso en particular 

CSS

/* Aplicar un estilo específico a un div con la clase .card */ 
.card { 
    background-color: white; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    padding: 20px; 
    transition: transform 0.3s ease-in-out; 
} 
.card:hover { 
    transform: scale(1.05); 
cursor: pointer;
}

HTML

  <div class="card">
        <h2>Título de la tarjeta</h2>
        <p>Este es el contenido de la tarjeta. Aquí puedes incluir texto, imágenes o cualquier otro elemento que necesites.</p>
    </div>

¿Qué consideraciones debes tener en cuenta sobre el uso de selectores de tipo? 

El uso de selectores de tipo es muy común en las primeras etapas del desarrollo de un proyecto para establecer los estilos generales de un sitio web. Sin embargo, a medida que el proyecto crece y se vuelve más complejo, los selectores de tipo pueden volverse insuficientes. 

Aquí es donde los selectores de clase e ID cobran importancia, ya que ofrecen un mayor control sobre la personalización de los estilos y los cuales veremos en seguida. 

Selectores de clase y ID 

Los selectores de clase e ID son dos de los selectores más utilizados en CSS. Estos selectores permiten aplicar estilos a elementos HTML de manera más precisa y flexible, lo que se vuelve indispensable en proyectos complejos. Aunque ambos sirven para identificar y aplicar estilos a elementos específicos, existen algunas diferencias entre ellos en cuanto a su uso y especificidad. 

Selector de clase (.) 

Un selector de clase se utiliza para apuntar a uno o más elementos que comparten la misma clase en un documento HTML. Esto permite aplicar estilos de manera uniforme a varios elementos sin importar su tipo. El nombre de una clase debe comenzar con un punto (.) seguido del nombre de la clase. 

Sintaxis   

.nombre_de_la_clase { 
    propiedad: valor; 
} 

Ejemplo  

Si quieres aplicar un estilo a todos los elementos con la clase .boton, lo harías de la siguiente manera: 

CSS

.boton { 
    background-color: blue; 
    color: white; 
    padding: 10px; 
} 

HTML

En el HTML, podrías tener varios botones o elementos con esa clase, y todos recibirían el mismo estilo, por tanto, todos estos elementos compartirán las mismas características de botón, incluso si son de diferentes tipos de elementos (button, div, etc.). 

<button class="boton">Enviar</button> 
<button class="boton">Cancelar</button> 
<div class="boton">Un div con estilo de botón</div> 

Ventajas del selector de clase 

• Reutilización: Puedes aplicar el mismo estilo a varios elementos sin importar su tipo, lo que te permite mantener un código limpio y fácil de mantener. 
• Combinación: Los selectores de clase pueden combinarse con otros selectores (como selectores de tipo o pseudo-clases) para afinar aún más el estilo. 

Selectores de ID (#) 

Un selector de ID selecciona un elemento único basado en su atributo id en HTML. A diferencia de las clases, el ID debe ser único dentro de un documento HTML. Esto significa que solo un elemento puede tener un id específico. El nombre del selector de ID comienza con un símbolo de numeral o «almohadilla» (#), seguido del nombre del ID. 

Sintaxis 

#nombre_de_id { 
    propiedad: valor; 
} 

Ejemplo 

Si quieres que un único botón tenga un estilo específico, puedes asignarle un ID y aplicarle estilos CSS de esta manera: 

CSS

#ejemplo_id { 
    background-color: red; 
    color: white; 
    padding: 15px; 
} 

En este caso, solo el botón con id=» ejemplo_id » recibirá los estilos definidos. 

HTML

<button id="ejemplo_id">Enviar</button> 

¿Qué diferencias hay entre una clase y un ID? 

• Unicidad: Un ID debe ser único en el documento, lo que significa que no puedes reutilizar el mismo ID en múltiples elementos. Las clases, por otro lado, pueden aplicarse a múltiples elementos. 
• Especificidad: Los selectores de ID tienen una especificidad mayor que los selectores de clase. Esto significa que, en caso de conflicto, un estilo aplicado con un ID siempre sobrescribirá un estilo aplicado con una clase, incluso si ambos se aplican al mismo elemento. 

Ejemplo práctico de diferencias entre clase e ID 

En este ejemplo, aunque el párrafo tiene tanto el ID “mi_identificador” como la clase “mi_clase”, el color de fondo final será azul debido a la mayor especificidad del selector de ID.

HTML

#mi_identificador{
  color: white;
  font-size: 25px;
  background-color: blue;
}
p {
  color: white;
  background-color: red;
}
.mi_clase{
  color: blue;
  background-color: yellow;
}

En este ejemplo, la posición del id no es relevante, debido al dominio que tiene su especificidad. Por tanto, puede ir de primero o de último, eso no importa; las reglas de estilos definidas dentro del cuerpo del id siempre estarán por encima de otros selectores.

CSS

<p id="mi_identificador" class="mi_clase">Este párrafo tiene una clase y un ID definidos</p>

Uso recomendado de los selectores de ID 

Dado que los ID deben ser únicos, se recomienda utilizarlos para elementos que necesitan estilos muy específicos, como encabezados principales, botones primarios, o contenedores. 

Combinación de selectores de clase e ID 

En el ejemplo anterior ya realizamos una combinación de una clase con un id, sin embargo, no está de más ver otro ejemplo para afianzar conceptos, ya que, a veces, es necesario combinar selectores de clase e ID para afinar aún más los estilos aplicados a un elemento.  

Esta práctica es útil cuando deseas aplicar estilos generales mediante clases, pero ajustar ciertos detalles para un elemento específico con un ID. 

Ejemplo 

CSS

.mi_boton { 
    padding: 10px; 
    border-radius: 50px; 
} 
 
#mi_identificador { 
    background-color: red; 
} 

En este ejemplo, el botón con id="identificador" tiene los estilos generales (padding:10px y border-radius:50px) definidos por la clase .boton, pero también recibe el color de fondo rojo (background-color: red) gracias al selector de ID. 

HTML

<button class="mi_boton" id="mi_identificador">Enviar</button> 

Especificidad en selectores de clase e ID 

El sistema de especificidad en CSS se basa en una serie de reglas que determinan qué estilo se aplica cuando varios selectores apuntan al mismo elemento. A continuación, se detalla la especificidad de diferentes selectores: 

Cuanto más específico es el selector, mayor será su prioridad en caso de conflicto. Es importante tener en cuenta la especificidad para evitar que los estilos se comporten de manera inesperada. 

Selectores de atributo

Los selectores de atributo en CSS te permiten seleccionar elementos basados en sus atributos HTML. Estos selectores son muy útiles cuando deseas aplicar estilos a elementos que comparten un atributo común, como href, src, type, entre otros. Los selectores de atributo pueden ser tan simples como verificar si un atributo existe, o tan complejos como buscar coincidencias parciales en el valor de un atributo. 

Selector de atributo básico [attr] 

El selector de atributo más básico selecciona todos los elementos que contienen un atributo específico, independientemente del valor de dicho atributo. 

Sintaxis 

[elemento[atributo]] { 
    propiedad: valor; 
} 

Ejemplo  

Si deseas seleccionar todos los enlaces (<a>) que tienen el atributo href, sin importar su valor, puedes hacerlo de esta forma: 

En este caso, se seleccionarán todos los enlaces que contengan el atributo href, lo que significa que solo los enlaces que realmente apuntan a un destino serán afectados por esta regla. 

CSS

a[href] { 
    color: blue;
    background-color: #000; 
} 

HTML

 <h1>Lista de enlaces</h1>
    <ul>
        <li><a href="https://www.ejemplo1.com">Enlace 1</a></li>
        <li><a href="https://www.ejemplo2.com">Enlace 2</a></li>
        <li><a href="https://www.ejemplo3.com">Enlace 3</a></li>
        <li><a href="https://www.ejemplo4.com">Enlace 4</a></li>
        <li><a href="https://www.ejemplo5.com">Enlace 5</a></li>
    </ul>

Selector de atributo con valor exacto: [attr=»valor»] 

Este tipo de selector selecciona elementos que tienen un atributo con un valor específico. Es más preciso que el selector básico, ya que verifica tanto la existencia del atributo como su valor. 

Sintaxis 

[elemento[atributo="valor"]] { 
    propiedad: valor; 
} 

Ejemplo  

Si quieres seleccionar solo los enlaces que apuntan a un sitio específico, puedes usar el siguiente selector, el cual afectará únicamente a los enlaces cuyo atributo href sea exactamente https://www.mienlace.hn, aplicando un color verde a esos enlaces. 

CSS

a[href="https://www.mienlace.hn"] { 
    color: green;  
} 

HTML

<h1>Lista de enlaces</h1>
    <ul>
        <li><a href="https://www.ejemplo1.com">Enlace 1</a></li>
        <li><a href="https://www.mienlace.hn">Enlace específico</a></li>
        <li><a href="https://www.ejemplo2.com">Enlace 2</a></li>
        <li><a href="https://www.ejemplo3.com">Enlace 3</a></li>
        <li><a href="https://www.ejemplo4.com">Enlace 4</a></li>
    </ul>

Selector de atributo con coincidencias parciales (^=) 

CSS ofrece varios selectores de atributo que permiten hacer coincidencias parciales en los valores de los atributos, lo que proporciona un nivel adicional de flexibilidad, este selector de atributo que con un valor (^=) y selecciona los elementos cuyo valor de atributo comienza con una cadena específica. 

Sintaxis 

[atributo^="valor"] { 
    propiedad: valor; 
} 

Ejemplo 

Si quieres seleccionar todos los enlaces que apuntan a sitios seguros https:// usarías este selector: 

CSS

Esto aplicará un estilo verde a todos los enlaces que comiencen con https://.

a[href^="https://"] { 
    color: green; 
} 

HTML

<div class="explanation">
   <h2>Demostración de selector CSS para enlaces HTTPS</h2>
    <p>Los enlaces que comienzan con "https://" aparecerán en verde.</p>
 </div>

   <h3>Lista de enlaces de ejemplo:</h3>
    <ul>
        <li><a href="https://www.ejemplo.com">Este enlace es HTTPS (verde)</a></li>
        <li><a href="http://www.ejemplo.com">Este enlace es HTTP (color normal)</a></li>
        <li><a href="https://www.google.com">Otro enlace HTTPS (verde)</a></li>
        <li><a href="mailto:correo@ejemplo.com">Un enlace de correo (color normal)</a></li>
        <li><a href="/ruta-local">Un enlace local (color normal)</a></li>
    </ul>

Selector de atributo que termina con un valor ($=) 

Este es el selector de sufijo el cual selecciona los elementos cuyo valor de atributo termina con el valor especificado. Por ejemplo, este código selecciona todos los enlaces cuyo valor del atributo href termina en «.pdf«. 

CSS

a[href$=".pdf"] { 
    color: red; 
}

HTML

<h1>Ejemplo de selector de atributo en CSS</h1>
<p>Este enlace apunta a un archivo PDF, por lo tanto, aplicará el estilo en rojo:</p>
<a href="documento.pdf">Descargar documento en PDF</a>

<p>Este enlace apunta a un archivo DOC, por lo tanto, no aplicará el estilo:</p>
<a href="documento.doc">Descargar documento en DOC</a>

Ejemplo 2

En este ejemplo deseamos seleccionar todas las imágenes con la extensión .png, entonces podríamos hacerlo indicando que únicamente las imágenes que tienen un valor dentro de src que incluya la extensión .png serán las afectadas.

CSS

img[src$=".png"] { 
    border: 2px solid blue; 
} 

HTML

<h1>Ejemplo de selector de atributo en CSS</h1>
<p>Esta imagen tiene la extensión .png, por lo tanto, aplicará el estilo:</p>
<img src="imagen.png" alt="Imagen PNG">

<p>Esta imagen tiene la extensión .jpg, por lo tanto, no aplicará el estilo:</p>
<img src="imagen.jpg" alt="Imagen JPG"

Selector de atributo que contiene un valor (*=) 

Selecciona los elementos cuyo valor de atributo contiene una cadena específica en cualquier parte del valor. 

Sintaxis 

[atributo*="valor"] { 
    propiedad: valor; 
} 

Ejemplo 

Si quieres seleccionar todos los enlaces que contienen la palabra blog en su URL, puedes usar este selector: 

CSS

Este código cambiará el color de todos los enlaces que tengan la palabra «blog» en su href. 

a[href*="blog"] { 
    color: orange; 
} 

HTML

<h1>Ejemplo de enlaces con selector CSS</h1>
<p>Enlaces que contienen la palabra "blog":</p>
    <ul>
        <li><a href="https://www.misitio.com/blog">Enlace al blog</a></li>
        <li><a href="https://www.misitio.com/articulos">Enlace a artículos</a></li>
        <li><a href="https://www.misitio.com/blog-noticias">Enlace a noticias de blog</a></li>
        <li><a href="https://www.misitio.com/contacto">Enlace de contacto</a></li>
    </ul>

Selector de atributo con coincidencia de palabra completa (~=) 

Este selector se usa para seleccionar elementos cuyo valor de atributo contiene una palabra específica. La palabra debe estar separada por espacios dentro del valor del atributo. 

Sintaxis 

[elemento[atributo~="palabra"]] { 
    propiedad: valor; 
} 

Ejemplo 

Si tienes una lista de clases CSS en un atributo class y quieres seleccionar solo los elementos que incluyen una palabra específica en esa lista, puedes usar este selector: 

CSS

[class~="importante"] { 
    font-weight: bold; 
} 

Este código seleccionará solo aquellos elementos que tengan la clase “importante“ dentro de una lista de clases en el atributo class. 

HTML

<h1>Ejemplo de clases con selector CSS</h1>
<p>Este es un <span class="importante">mensaje importante</span> en la página.</p>
<p>Este texto tiene <span class="nota importante">varias clases</span> asignadas, incluyendo "importante".</p>
<p>Este texto no tiene ninguna clase especial.</p>

Selector de atributo con coincidencia de prefijo (|=) 

Este selector selecciona elementos cuyo valor de atributo comienza con una cadena específica seguida por un guion (-). Es comúnmente usado para atributos como lang, donde el valor incluye un idioma seguido de una variación regional. 

Sintaxis 

[atributo|="valor"] { 
    propiedad: valor; 
} 

Ejemplo 

Si deseas seleccionar elementos que tengan el atributo lang configurado en inglés (en) o cualquier variación regional como en-US o en-GB, usarías este selector: 

CSS

[lang|="en"] { 
    font-style: italic; 
} 

Esto aplicará un estilo en cursiva a cualquier elemento cuyo atributo lang comience con en, sin importar la variación regional. 

HTML

<h1>Ejemplo de selector de atributo en CSS</h1>  
<p lang="en">Este texto está en inglés y aplicará el estilo en cursiva.</p>
    <p lang="en-US">Este texto está en inglés de Estados Unidos y también aplicará el estilo en cursiva.</p>
   
<p lang="es">Este texto está en español y no aplicará el estilo.</p>

Consideraciones sobre el uso de los selectores de atributo 

• Rendimiento: Aunque los selectores de atributo son muy útiles, deben usarse con moderación en documentos grandes. Algunos de estos selectores, especialmente los que realizan coincidencias parciales, pueden afectar el rendimiento si se utilizan en exceso, ya que requieren que el navegador realice comparaciones más complejas. 
• Compatibilidad de navegadores: Los selectores de atributo son ampliamente compatibles con todos los navegadores modernos, pero algunos de los selectores más complejos (como las coincidencias parciales) podrían no ser compatibles con versiones más antiguas de los navegadores. 
• Utilidad en formularios: Los selectores de atributo son especialmente útiles para estilizar formularios dinámicos o interactivos, donde los atributos cambian en función del estado del formulario. Esto permite aplicar estilos según el tipo de campo o su estado, mejorando la experiencia de usuario. 

Combinadores de selectores en CSS 

Los combinadores de selectores permiten seleccionar elementos basados en su relación con otros elementos dentro del documento HTML. A través de los combinadores, puedes crear reglas de CSS más específicas y apuntar a elementos según su posición en relación con otros elementos. 

Existen cuatro combinadores principales en CSS, que te permiten definir la relación entre los elementos que seleccionas: 

Combinador de descendientes ( ` `) 

El combinador de descendientes selecciona elementos que son descendientes (en cualquier nivel de profundidad) de un elemento padre específico. Un descendiente es cualquier elemento que se encuentra dentro de otro, sin importar cuántos niveles haya entre ellos. 

Sintaxis 

elementoA elementoB { 
    propiedad: valor; 
} 

Ejemplo 

CSS

Este selector aplicará el color azul a todos los elementos <p> que sean descendientes de un <div>. Puede haber varios niveles entre el <div> y el <p>, pero siempre que el <p> esté dentro de un <div>, recibirá ese estilo. 

div p{
   background-color: blue;
}

Toma en cuenta que la regla para leer correctamente estas instrucciones es de derecha a izquierda; si lo haces al contrario, probablemente se produzcan errores o crees reglas que no pueden ser posibles.

HTML

<div>
    <p>Este párrafo tendrá fondo azul porque está dentro de un div</p>
    
    <section>
        <p>Este párrafo también tendrá fondo azul aunque esté dentro de una section, porque la section está dentro del div</p>
    </section>
    
    <article>
        <aside>
            <p>Este párrafo también tendrá fondo azul, sin importar cuántos niveles de anidación haya</p>
        </aside>
    </article>
</div>

<p>Este párrafo NO tendrá fondo azul porque está fuera del div</p>

Combinador de hijos directos (>) 

El combinador de hijos directos selecciona elementos que son hijos inmediatos de un elemento específico. A diferencia del combinador de descendientes, este combinador solo selecciona los elementos que están un nivel de anidación por debajo del padre, ignorando los que están más profundamente anidados. 

Sintaxis 

elementoA > elementoB { 
    propiedad: valor; 
} 

Ejemplo 

CSS

Este selector aplicará el color verde solo a los elementos <p> que sean hijos directos de un <div>. Si un <p> está contenido dentro de otro elemento (como un section) dentro del <div>, no se aplicará el estilo. 

div > p { 
    color: green; 
} 

HTML

 <div>
    <p>Este párrafo SÍ será verde porque es hijo directo del div</p>
    
    <section>
        <p>Este párrafo NO será verde porque hay una section entre el div y el p</p>
    </section>
    
    <p>Este párrafo también será verde porque es hijo directo del div</p>
</div>

<p>Este párrafo NO será verde porque está fuera del div</p>

Combinador de elementos adyacentes (+) 

El combinador de elementos adyacentes selecciona un elemento que está directamente después de otro elemento, es decir, que es el hermano inmediato en el árbol DOM. 

Sintaxis 

elementoA + elementoB { 
    propiedad: valor; 
} 

Ejemplo 

CSS

Este selector elimina el margen superior de cualquier párrafo (<p>) que siga inmediatamente después de un encabezado de nivel 2 (<h2>). Si hay otro elemento entre el h2 y el p, el estilo no se aplicará. 

h2 + p { 
    margin-top: 0; 
} 

HTML

<h2>Un título</h2>
<p>Este párrafo SÍ tendrá margin-top: 0 porque viene justo después del h2</p>
<p>Este párrafo NO tendrá margin-top: 0 porque no viene inmediatamente después de un h2</p>

<h2>Otro título</h2>
<p>Este párrafo SÍ tendrá margin-top: 0 porque viene justo después del h2</p>

<h2>Un título más</h2>
<div>Este div está en medio</div>
<p>Este párrafo NO tendrá margin-top: 0 porque hay un div entre él y el h2</p>

Combinador de hermanos generales (~) 

El combinador de hermanos generales selecciona todos los elementos que son hermanos de un elemento específico, pero que no necesariamente son adyacentes. A diferencia del combinador +, este selecciona todos los hermanos que aparecen después del primer elemento en el mismo nivel del árbol DOM. 

Sintaxis 

elementoA ~ elementoB { 
    propiedad: valor; 
} 

Ejemplo 

CSS

Este selector cambiará el color de todos los párrafos (<p>) que sean hermanos del encabezado h2 y que vengan después de él, sin importar si están directamente adyacentes o si hay otros elementos entre ellos. 

h2 ~ p { 
    color: red; 
} 

HTML

<p>Este párrafo NO será rojo porque está antes del h2</p>

<h2>Un título</h2>
<p>Este párrafo será rojo porque viene después del h2</p>
<div>Este div no afecta al selector</div>
<p>Este párrafo también será rojo aunque haya otros elementos en medio</p>
<p>Este párrafo también será rojo</p>

<h2>Otro título</h2>
<p>Este párrafo será rojo</p>
<span>Algún texto</span>
<p>Este párrafo también será rojo</p>

<div>
    <p>Este párrafo NO será rojo porque no es hermano del h2 (está dentro de un div)</p>
</div>

Uso combinado de combinadores 

Una de las características más poderosas de los combinadores es que puedes combinarlos entre sí para crear selecciones aún más precisas. Por ejemplo, puedes seleccionar todos los hijos directos de un elemento, que además sean hermanos adyacentes de otro. 

Ejemplo 

div > h2 + p { 
    font-weight: bold; 
} 

En este caso, se seleccionarán solo los párrafos (<p>) que son hijos directos de un div, pero que además siguen inmediatamente a un encabezado h2. 

HTML

<div>
    <h2>Título</h2>
    <p>Este párrafo SÍ será negrita porque el h2 es hijo directo del div y este p viene justo después del h2</p>
    <p>Este párrafo NO será negrita porque no viene inmediatamente después del h2</p>
</div>

<div>
    <section>
        <h2>Título</h2>
        <p>Este párrafo NO será negrita porque el h2 no es hijo directo del div</p>
    </section>
</div>

<div>
    <h2>Título</h2>
    <span>Algún texto</span>
    <p>Este párrafo NO será negrita porque hay un span entre el h2 y el p</p>
</div>

<h2>Título</h2>
<p>Este párrafo NO será negrita porque el h2 no está dentro de un div</p>

Analicemos la selector div > h2 + p:

1. div > significa «hijo directo del div»
2. h2 + p significa «p que viene inmediatamente después del h2»
3. Todo junto significa: «selecciona cualquier p que venga inmediatamente después de un h2 que sea hijo directo de un div»

Para que el selector funcione, deben cumplirse TODAS estas condiciones:

• El <h2> debe ser hijo directo del <div>
• El <p> debe venir inmediatamente después del <h2>
• No puede haber elementos entre el <h2> y el <p>

Consideraciones sobre el uso de combinadores 

Selectores de grupo 

Los selectores de grupo en CSS permiten aplicar un mismo conjunto de estilos a múltiples elementos a la vez, sin tener que repetir las reglas de estilo para cada uno. Esto simplifica el código CSS, lo hace más eficiente y fácil de mantener, especialmente cuando varios elementos deben compartir los mismos estilos.  

Sintaxis

selector1, selector2, selector3 { 
    propiedad: valor; 
} 

Ejemplo  

CSS

h1, h2, h3 { 
    font-family: 'Arial', sans-serif; 
    color: darkblue; 
} 

En este ejemplo, los estilos especificados se aplicarán a todos los elementos h1, h2 y h3. Todos ellos compartirán la misma fuente y color de texto, sin necesidad de escribir tres reglas CSS separadas. 

HTML

<h1>Este encabezado será Arial y azul oscuro</h1>
<p>Este párrafo NO se verá afectado</p>

<div>
    <h2>Este encabezado también será Arial y azul oscuro</h2>
    <h3>Este encabezado también será Arial y azul oscuro</h3>
</div>

<section>
    <h1>Este encabezado será Arial y azul oscuro sin importar dónde esté</h1>
    <article>
        <h2>Este h2 también tendrá los mismos estilos</h2>
        <h3>Y este h3 igual</h3>
    </article>
</section>

<h4>Este encabezado NO se verá afectado porque es h4</h4>

Lo importante de este selector es que:

1. La coma (,) significa «y también«
2. Aplica los mismos estilos a todos los elementos listados
3. No importa la ubicación de los elementos en el HTML
4. No importa si los elementos están anidados o no
5. Solo afecta a los elementos específicamente listados (en este caso h1, h2 y h3)

Ventajas del uso de selectores de grupo 

• Código más limpio: Al agrupar selectores que comparten estilos, puedes reducir la cantidad de código repetido, lo que hace tu archivo CSS más compacto y fácil de leer. 
• Mantenimiento sencillo: Si más adelante decides cambiar uno de los estilos (por ejemplo, el color), solo necesitas modificarlo una vez en el grupo, y todos los elementos se actualizarán automáticamente. 

Combinación de selectores de grupo con otros selectores 

Los selectores de grupo se pueden combinar con otros tipos de selectores, como los selectores de clase, ID, tipo y atributos, para crear grupos más complejos que abarquen una mayor variedad de elementos.

Esto es útil cuando quieres aplicar estilos compartidos a una mezcla de selectores específicos. 

Ejemplo de combinación con selectores de clase y tipo 

CSS

p, .clase-destacada, #principal { 
    background-color: lightgray; 
    padding: 10px; 
}

En este ejemplo todos los elementos <p>, los elementos con la clase .clase-destacada, y el elemento con el ID #principal recibirán un fondo de color gris claro y un relleno de 10 píxeles. 

HTML

<p>Este párrafo tendrá fondo gris claro y padding porque es un elemento p</p>

<div class="clase-destacada">
    Este div tendrá fondo gris claro y padding por tener la clase-destacada
</div>

<span class="clase-destacada">
    Este span también tendrá fondo gris claro y padding por tener la clase-destacada
</span>

<section id="principal">
    Este section tendrá fondo gris claro y padding por tener el id "principal"
</section>

<div>
    <p>Este párrafo también tendrá los estilos porque es un elemento p</p>
    <div class="clase-destacada">
        Este div tendrá los estilos por la clase-destacada
    </div>
</div>

<div>
    Este div NO tendrá los estilos porque no tiene la clase ni el id y no es un p
</div>

Toma en cuenta lo siguiente acerca de este selector:

1. Afecta a TODOS los elementos <p>, sin importar dónde estén
2. Afecta a CUALQUIER elemento que tenga la clase clase-destacada
3. Afecta al elemento que tenga el ID principal (debería ser único en la página)
4. Los elementos recibirán los mismos estilos (fondo gris claro y padding)
5. No importa la posición en el documento

Este tipo de selector es muy útil cuando quieres aplicar los mismos estilos a elementos que pueden ser identificados de diferentes maneras (por etiqueta, clase o ID).

Optimización y rendimiento con selectores de grupo 

Los selectores de grupo no solo mejoran la legibilidad del código, sino que también contribuyen al rendimiento del navegador al reducir el número total de reglas CSS que el navegador necesita evaluar.

Al agrupar varias reglas en una sola, se simplifica el proceso de renderización, lo que puede mejorar el rendimiento en sitios con mucho contenido. UNa forma de optimizar esto es haciendo lo del siguiente ejemplo:

Ejemplo 

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Verdana', sans-serif; 
    color: darkred; 
    margin-bottom: 15px; 
} 

En este caso, todos los encabezados desde h1 hasta h6 comparten el mismo estilo. En lugar de definir seis reglas separadas, una sola regla agrupa los selectores, lo que mejora tanto el rendimiento como la organización del código. 

HTML

<h1>Este encabezado tendrá fuente Verdana, color rojo oscuro y margen inferior</h1>
<p>Este párrafo NO se verá afectado</p>

<div>
    <h2>Este h2 tendrá los mismos estilos</h2>
    <h3>Este h3 también tendrá Verdana, color rojo oscuro y margen</h3>
    <article>
        <h4>Este h4 tendrá los mismos estilos</h4>
        <h5>Este h5 igual tendrá Verdana y color rojo oscuro</h5>
        <h6>Y este h6, siendo el más pequeño, también tendrá los mismos estilos</h6>
    </article>
</div>

<section>
    <h1>Todos los encabezados tendrán estos estilos sin importar dónde estén</h1>
    <div>
        <h2>Este h2 también</h2>
        <h3>Y este h3</h3>
    </div>
</section>

<p>Este elemento NO tendrá los estilos porque no es un encabezado</p>

Aquí también es importante recordar la finalidad de este selector:

1. Aplica los mismos estilos a TODOS los niveles de encabezados (h1 hasta h6)
2. No importa dónde estén ubicados en el documento
3. No importa cuántas veces aparezcan
4. No afecta a elementos que no sean encabezados
5. Todos recibirán la misma fuente, color y margen inferior

Uso práctico en diseño web 

Estilos globales para encabezados: A menudo, todos los encabezados de una página deben compartir estilos comunes como la tipografía o el color. Usar selectores de grupo es una forma eficiente de asegurarte de que todos los encabezados tengan un estilo uniforme. 

CSS

h1, h2, h3, h4 { 
    font-weight: bold; 
    text-align: center; 
} 

HTML

<h1>Este h1 estará centrado y en negrita</h1>
<p>Este párrafo NO estará centrado ni en negrita</p>

<div>
    <h2>Este h2 estará centrado y en negrita</h2>
    <section>
        <h3>Este h3 también estará centrado y en negrita</h3>
        <article>
            <h4>Este h4 también estará centrado y en negrita</h4>
        </article>
    </section>
</div>

<h5>Este h5 NO tendrá los estilos porque no está en el selector</h5>
<h6>Este h6 tampoco tendrá los estilos</h6>

<section>
    <h1>Este h1 estará centrado y en negrita sin importar su ubicación</h1>
    <div>
        <h2>Este h2 también</h2>
        <h3>Y este h3 igual</h3>
        <h4>Este h4 también tendrá los mismos estilos</h4>
    </div>
</section>

Lo importante de este selector es que:

1. Solo afecta a los encabezados h1, h2, h3 y h4
2. NO afecta a h5 y h6
3. No importa dónde estén ubicados los encabezados en el documento
4. Todos los encabezados seleccionados tendrán el mismo alineado central y negrita
5. La propiedad font-weight: bold podría parecer redundante ya que los encabezados son negrita por defecto, pero es útil para asegurar consistencia

Estilos compartidos entre diferentes elementos de texto. Si varios tipos de texto, como párrafos y listas, deben compartir un estilo de línea y espaciado similar, puedes agruparlos: 

CSS

p, ul, ol { 
    line-height: 1.6; 
    margin-bottom: 20px; 
} 

Este código asegura una consistencia tipográfica en todos los elementos de texto de la página.

HTML

<p>Este párrafo tendrá un interlineado de 1.6 y un margen inferior de 20px. El texto puede ser largo para que se note el interlineado en múltiples líneas de contenido.</p>

<ul>
    <li>Esta lista no ordenada tendrá interlineado 1.6</li>
    <li>Y también tendrá margen inferior</li>
    <li>Cada elemento de la lista se beneficiará del interlineado</li>
    <li>Lo que hace más legible el contenido</li>
</ul>

<ol>
    <li>Esta lista ordenada también tendrá interlineado 1.6</li>
    <li>Y margen inferior de 20px</li>
    <li>El espaciado entre líneas hace que sea más fácil de leer</li>
    <li>Especialmente en listas largas como esta</li>
</ol>

<div>
    <p>Este párrafo también tendrá los mismos estilos sin importar donde esté</p>
    
    <ul>
        <li>Esta lista no ordenada anidada</li>
        <li>También tendrá los mismos estilos</li>
    </ul>
    
    <ol>
        <li>Y esta lista ordenada dentro del div</li>
        <li>También tendrá el interlineado y margen</li>
    </ol>
</div>

<span>Este span NO tendrá los estilos porque no es p, ul ni ol</span>

Importante señalar que este selector:

1. Afecta a tres tipos de elementos comunes de contenido:
   • Párrafos (<p>)
   • Listas no ordenadas (<ul>)
   • Listas ordenadas (<ol>)
2. No importa dónde estén ubicados estos elementos en el documento
3. El interlineado (line-height) afectará al contenido dentro de estos elementos
4. El margen inferior creará espaciado entre estos elementos y los que les siguen
5. No afecta a otros elementos como <div>, <span>, etc.

Agrupar selectores de clase y tipo: A menudo en proyectos grandes, varios selectores de clase y tipo pueden compartir el mismo conjunto de estilos. Agruparlos simplifica el mantenimiento del código, ya que un cambio en los estilos se reflejará en todos los elementos del grupo: 

CSS

.boton, a, input[type="submit"] { 
    background-color: navy; 
    color: white; 
    padding: 10px; 
} 

Este ejemplo aplica el mismo estilo a botones, enlaces y botones de envío (submit) en un formulario. 

HTML

<h1>Ejemplo de Selectores en CSS</h1>
    
    <!-- Botón con clase "boton" -->
    <button class="boton">Botón con clase "boton"</button>
    
    <!-- Enlace normal -->
    <a href="#">Enlace con estilo aplicado</a>
    
    <!-- Botón de tipo "submit" en un formulario -->
    <form action="#">
        <input type="submit" value="Enviar">
    </form>

Consideraciones sobre el uso de selectores de grupo 

Pseudo-clases de Interacción 

Las pseudo-clases en CSS son selectores que te permiten apuntar a elementos en un estado particular o en respuesta a la interacción del usuario.

Las pseudo-clases de interacción son especialmente útiles para diseñar interfaces dinámicas, ya que responden a la interacción del usuario con elementos como enlaces, botones, campos de formulario, y más. 

Estas pseudo-clases permiten cambiar el aspecto de un elemento cuando ocurre un evento, como cuando un enlace es visitado, un botón es presionado, o un campo de texto está enfocado. 

Pseudo-clase :hover 

La pseudo-clase :hover se activa cuando el usuario pasa el cursor sobre un elemento, esta es una de las pseudo-clases más utilizadas en el diseño web, ya que permite crear interfaces interactivas donde los elementos cambian su estilo al ser «hovered» (colocados bajo el cursor del ratón). 

Sintaxis 

elemento:hover { 
    propiedad: valor; 
}  

Ejemplo

CSS

a:hover { 
    color: red; 
    text-decoration: underline; 
} 

Este ejemplo cambia el color del enlace a rojo y subraya el texto cuando el usuario pasa el cursor sobre él. Esta interacción es común para enlaces, botones y otros elementos interactivos. 

HTML

<p>Visita nuestro <a href="#">sitio web</a> para más información.</p>

¿Cuándo usar la pseudo-clase :hover? 

Esta pseudo-clase es comúnmente utilizada para: 

• Botones y enlaces interactivos: Mejorar la experiencia del usuario al proporcionar retroalimentación visual cuando interactúan con elementos. 
• Tarjetas o elementos de contenido: En diseños modernos, se utiliza :hover para resaltar secciones de contenido, como tarjetas informativas o imágenes, al pasar el cursor sobre ellas. 

Pseudo-clase :focus 

La pseudo-clase :focus se aplica a un elemento que ha recibido el enfoque, generalmente a través de la interacción del teclado o cuando se hace clic en un campo de formulario.

Los campos de entrada, como los de texto o los botones, son elementos comunes que reciben el enfoque cuando un usuario navega a través de un formulario. 

Sintaxis 

elemento:focus { 
    propiedad: valor; 
}

Ejemplo  

CSS

input:focus { 
    border-color: blue; 
    background-color: lightyellow; 
} 

Este ejemplo cambia el color del borde y el fondo de un campo de entrada cuando el usuario hace clic en él o navega hacia él utilizando el teclado. 

HTML

<form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre">
</form>

Pseudo-clase :active 

La pseudo-clase :active se activa mientras un elemento está siendo presionado por el usuario. Generalmente se utiliza en botones o enlaces, cambiando su estilo en el breve momento en que el usuario hace clic en ellos. 

Sintaxis 

elemento:active { 
    propiedad: valor; 
} 

Ejemplo 

CSS

 button:active { 
    background-color: darkblue; 
    transform: translateY(2px); 
} 

Este ejemplo oscurece el color del fondo del botón y lo desplaza hacia abajo ligeramente cuando el usuario hace clic en él, simulando una interacción táctil más realista. 

HTML

 <button>Haz clic aquí</button>

Pseudo-clase :visited 

La pseudo-clase :visited se aplica a enlaces (<a>) que el usuario ha visitado previamente. Esto es útil para cambiar la apariencia de los enlaces que el usuario ya ha hecho clic, ayudando a diferenciar entre contenido nuevo y contenido ya visitado. 

Sintaxis 

a:visited { 
    color: purple; 
} 

Ejemplo  

CSS

a:visited { 
    color: green; 
} 

Este ejemplo cambia el color de los enlaces que el usuario ya ha visitado a verde, una práctica común en la mayoría de los navegadores; sin embargo, el color verde no es común en su uso para estos casos, solo lo utilizamos para fines didácticos.

HTML

<p>Visita este <a href="https://www.google.hn">enlace</a>.</p>

Convertir este fragmento a bloquoete 

“Aclaración importante sobre la pseudo-clase :visited 

Por razones de privacidad y seguridad, CSS tiene restricciones sobre las propiedades que se pueden modificar usando :visited. Solo se permiten propiedades visuales como color, background-color, border-color, entre otras.

No se permite cambiar el contenido, el tamaño o la posición de los elementos con esta pseudo-clase para evitar rastrear el historial de navegación del usuario.” 

Pseudo-clase :link 

La pseudo-clase :link selecciona los enlaces (<a>) que no han sido visitados todavía por el usuario. Esto permite diferenciar el estilo de los enlaces nuevos de los ya visitados. 

Sintaxis 

a:link { 
    propiedad: valor; 
} 

Ejemplo 

CSS

a:link { 
    color: blue; 
} 

Este ejemplo hace que todos los enlaces no visitados aparezcan en azul, siguiendo la convención visual típica de los hipervínculos o enlaces. 

HTML

<p>Visita este <a href="https://www.google.hn">enlace</a>.</p>

¿Cuándo usar la pseudo-clase :link?  

Orden de las pseudo-clases de enlace: :link, :visited, :hover, :active 

Como desarrollador, es importante que te informes y sepas muy bien lo que haces, ya que no se trata solo de aplicar estilos sin tomar otros factores en cuenta, por ejemplo, en el caso de las pseudo-clases :link, :visited, :hover, :active, no se debe pasar por alto un aspecto tan fundamental como la cascada a la hora de definir estilos a los enlaces, de lo contrario esto podría interferir en tus proyectos. 

Cuando se aplican múltiples pseudo-clases a un enlace, es importante seguir un orden específico.

Este orden es comúnmente conocido como «LoVe-HA» y es el siguiente: 

Ejemplo de uso de múltiples pseudo-clases 

CSS

:link { 
    color: blue; 
} 
a:visited { 
    color: purple; 
} 
a:hover { 
    color: red; 
    text-decoration: underline; 
} 
a:active { 
    color: darkred; 
} 

Este conjunto de reglas CSS proporciona estilos diferentes a los enlaces dependiendo de si han sido visitados, están siendo «hovered», o están siendo presionados. 

HTML

<h1>Ejemplo de uso de múltiples pseudo-clases</h1>
<ul>
   <li><a href="https://www.ejemplo1.com">Enlace No Visitado</a></li>
   <li><a href="https://www.ejemplo2.com">Enlace Visitado</a></li>
   <li><a href="https://www.ejemplo3.com">Enlace Hover</a></li>
   <li><a href="https://www.ejemplo4.com">Enlace Activo</a></li>
</ul>

Consideraciones sobre las Pseudo-clases de Interacción 

Pseudo-clases estructurales 

Las pseudo-clases estructurales en CSS permiten seleccionar elementos en función de su posición dentro del DOM, es decir, con base en su ubicación relativa a otros elementos en la jerarquía del documento HTML.  

Estas pseudo-clases son útiles para aplicar estilos a elementos en posiciones específicas o con características particulares dentro de su contenedor. 

A continuación, exploraremos las pseudo-clases estructurales más utilizadas en CSS: 

Pseudo-clase :first-child 

La pseudo-clase :first-child selecciona un elemento que es el primer hijo de su padre. Es útil cuando deseas aplicar estilos solo al primer elemento dentro de un contenedor. 

Sintaxis 

elemento:first-child { 
    propiedad: valor; 
} 

Ejemplo  

CSS

p:first-child { 
    font-weight: bold; 
} 

Este ejemplo aplicará un estilo de negrita solo al primer párrafo (<p>) dentro de su contenedor. 

HTML

<div>
     <p>Este es el primer párrafo y debería estar en negrita.</p>
     <p>Este es el segundo párrafo y no debería estar en negrita.</p>
     <p>Este es el tercer párrafo.</p>
</div>

Ejemplo 2

css

li:first-child { 
    background-color: lightblue; 
} 

En este caso, solo el primer elemento de la lista (<li>) dentro de una lista desordenada o ordenada recibirá el fondo azul claro. 

HTML

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
 </ul>

Pseudo-clase :last-child 

La pseudo-clase :last-child selecciona un elemento que es el último hijo de su padre. Es lo opuesto a :first-child, y se usa para aplicar estilos solo al último elemento dentro de un contenedor. 

Sintaxis 

elemento:last-child { 
    propiedad: valor; 
} 

Ejemplo  

CSS

p:last-child { 
    margin-bottom: 0; 
} 

Este código elimina el margen inferior del último párrafo (<p>) en su contenedor. 

HTML

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
 </ul>

Pseudo-clase :nth-child(n) 

La pseudo-clase :nth-child(n) selecciona un elemento basado en su posición dentro de su padre. Esta pseudo-clase es muy versátil, ya que permite seleccionar elementos en base a fórmulas numéricas. 

Sintaxis  

elemento:nth-child(n) { 
    propiedad: valor; 
} 

Donde n puede ser: 

• Un número exacto: :nth-child(3) selecciona el tercer hijo. 
• Una palabra clave como odd o even: :nth-child(odd) selecciona los hijos en posiciones impares, y :nth-child(even) selecciona los hijos en posiciones pares. 
• Una fórmula: :nth-child(2n+1) selecciona todos los hijos en posiciones impares (1, 3, 5, etc.). 

Ejemplo con números exactos 

CSS

li:nth-child(3) { 
    color: red; 
} 

Esto selecciona el tercer elemento (<li>) de una lista y lo colorea en rojo. 

HTML

<ul>
   <li>Primer elemento de la lista</li>
   <li>Segundo elemento de la lista</li>
   <li>Tercer elemento de la lista</li>
   <li>Cuarto elemento de la lista</li>
</ul>

Ejemplo con fórmulas 

CSS

li:nth-child(2n) { 
    background-color: lightgrey; 
}

Este ejemplo aplica un fondo gris claro a todos los elementos en posiciones pares de la lista (<li>). 

HTML

<ul>
   <li>Elemento 1</li>
   <li>Elemento 2</li>
   <li>Elemento 3</li>
   <li>Elemento 4</li>
   <li>Elemento 5</li>
   <li>Elemento 6</li>
</ul>

Pseudo-clase :nth-of-type(n) 

La pseudo-clase :nth-of-type(n) es similar a :nth-child(n), pero selecciona solo los elementos que son del mismo tipo (es decir, el mismo tipo de etiqueta) dentro de su padre. 

Sintaxis 

elemento:nth-of-type(n) { 
    propiedad: valor; 
} 

Ejemplo 

CSS

p:nth-of-type(2) { 
    color: green; 
} 

Este código selecciona el segundo párrafo (<p>) dentro de su contenedor y lo colorea de verde. 

HTML

<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
<p>Párrafo 4</p>

Pseudo-clase :only-child 

La pseudo-clase :only-child selecciona un elemento que es el único hijo de su padre, es decir, que no tiene hermanos. 

Sintaxis 

elemento:only-child { 
    propiedad: valor; 
} 

Ejemplo 

CSS

p:only-child { 
    font-style: italic; 
    background-color: yellow;
} 

En este ejemplo se define un estilo de cursiva a la fuente de los párrafos que son los únicos hijos dentro de su contenedor y a su vez se aplica un fondo amarillo para notar mejor la diferencia. 

HTML

<div>
     <p>Este es el único párrafo dentro de este div y será en cursiva.</p>
</div>
<div>
    <p>Este párrafo no será en cursiva porque hay otro párrafo en el mismo contenedor.</p>
    <p>Otro párrafo en el mismo contenedor.</p>
</div>

Pseudo-clase :nth-last-child(n) 

La pseudo-clase :nth-last-child(n) selecciona un elemento basado en su posición desde el final de su padre. Funciona de manera similar a :nth-child(n), pero cuenta desde el último hijo en lugar del primero. 

Sintaxis 

elemento:nth-last-child(n) { 
    propiedad: valor; 
} 

 Ejemplo 

CSS

li:nth-last-child(2) { 
    color: blue; 
} 

Este código selecciona el penúltimo (de abajo hacia arriba) elemento de una lista y lo colorea de azul. 

HTML

<ul>
   <li>Elemento 1</li>
   <li>Elemento 2</li>
   <li>Elemento 3</li>
   <li>Elemento 4</li>
   <li>Elemento 5</li>
   <li>Elemento 6</li>
</ul>

Pseudo-clase :nth-last-of-type(n) 

Selecciona un elemento basado en su posición desde el final dentro de su tipo. Es una combinación de nth-of-type y nth-last-child, pero solo cuenta los elementos del mismo tipo. 

Sintaxis 

elemento:nth-last-of-type(n) { 
    propiedad: valor; 
} 

 Ejemplo 

CSS 

p:nth-last-of-type(1) { 
    text-align: center; 
} 

Este código centra el último párrafo (<p>) en su contenedor. 

HTML

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
</div>
<div>
    <p>Otro párrafo 1</p>
    <p>Otro párrafo 2</p>
</div>

Pseudo-clase :first-of-type  

Está pseudo-clase selecciona el primer hijo de un tipo específico dentro de su contenedor. Es decir que seleccionará el primer elemento de un tipo dado, como el primer p, div, h1, etc., sin importar si es el primer hijo en general, sino el primero de ese tipo en particular. 

Ejemplo

CSS

p:first-of-type { 
  font-weight: bold; 
} 

En este caso, el primer párrafo (p) dentro de cada contenedor recibirá un estilo en negrita. 

HTML

<div>
    <p>Este es el primer párrafo y estará en negrita.</p>
    <p>Este es el segundo párrafo y no estará en negrita.</p>
</div>
<div>
    <p>Otro primer párrafo en negrita.</p>
    <p>Otro segundo párrafo sin negrita.</p>
</div>

Pseudo-clase :last-of-type  

Selecciona el último hijo de un tipo específico dentro de su contenedor. Al contrario de first-of-type, este selecciona el último elemento de un tipo dado, como el último p, div, h1, etc.  Sin importar si es el último hijo en general, sino el último de ese tipo en particular. 

Ejemplo

CSS 

p:last-of-type { 
  margin-bottom: 0; 
} 

En este caso, el último párrafo (p) de cada contenedor tendrá su margen inferior eliminado, ideal para ajustar el espaciado final. 

HTML 

<div>
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <p>Último párrafo en este contenedor, sin margen inferior.</p>
</div>
<div>
    <p>Otro párrafo 1</p>
    <p>Otro último párrafo en este contenedor, sin margen inferior.</p>
</div>

Pseudo-clase :not() 

La pseudo-clase :not() excluye elementos que coincidan con un selector específico. Es muy útil para exclusiones dentro de un conjunto de elementos, permitiendo seleccionar todos menos los que coinciden con el selector dentro del :not(). 

Sintaxis 

elemento:not(selector) { 
    propiedad: valor; 
} 

Ejemplo 

CSS

p:not(.intro) { 
    color: grey; 
} 

Este código aplicará un color gris a todos los párrafos, excepto aquellos con la clase .intro. 

HTML

<p class="intro">Este es un párrafo con la clase "intro" y no será gris.</p>
<p>Este párrafo será gris.</p>
<p>Este también será gris.</p>
<p class="intro">Otro párrafo con la clase "intro" que no será gris.</p>

Pseudo-clases de comportamiento de formularios 

Las pseudo-clases de comportamiento de formularios son utilices cuando queremos aplicar estilos con base en el estado de los elementos.  

Pseudo-clase :enabled 

Selecciona todos los elementos de formulario que están habilitados, su funcion es diferenciar los elementos interactrivos de los no interactivos 

Ejemplo

CSS

input:enabled { 
    background-color: green; 
} 

Este código aplica un color de fondo verde a todos los campos de entrada que estén habilitados.

HTML

<form>
    <input type="text" placeholder="Campo habilitado">
    <input type="text" placeholder="Campo deshabilitado" disabled>
    <input type="submit" value="Enviar">
</form>

Pseudo-clase :disabled 

Selecciona los elementos de formulario que están deshabilitados, también nos indica cuando un elementos esta o no disponible para su interacción  

Ejemplo

CSS

input:disabled { 
    background-color: lightgrey; 
} 

HTML

<form>
    <input type="text" placeholder="Campo habilitado">
    <input type="text" placeholder="Campo deshabilitado" disabled>
    <input type="submit" value="Enviar">
</form>

Pseudo-clase :checked 

Selecciona los elementos de tipo casilla de verificación (checkbox) o botón de opción (radio) que están seleccionados, a su vez, aplica estilos a los elementos para mejorar su interaccion visual. 

Ejemplo: 

CSS 

input:checked {
     box-shadow: 0 0 0 2px green;
}

Con el selector Input:checked aplicamos una sombra verde a todos los elementos de selección que estén seleccionados.

HTML 

<form>
    <label>
        <input type="checkbox" checked> Opción 1
    </label>
    <label>
        <input type="checkbox"> Opción 2
    </label>
    <label>
        <input type="radio" name="radio" checked> Opción A
    </label>
    <label>
        <input type="radio" name="radio"> Opción B
    </label>
</form>

Pseudo-clase :indeterminate 

Selecciona los elementos que están en un estado indeterminado, como una casilla de verificación en un estado intermedio, esta pseudo-clase se utiliza básicamente en dos casos principales: 

• Checkboxes: Cuando un checkbox se encuentra en estado «indeterminado» cuando está visualmente marcado con una línea, es decir, ni completamente marcado ni desmarcado. Esto puede establecerse mediante JavaScript, pero no directamente con HTML. 
• Elementos de progreso (<progress>): El otro caso es cuando el progreso de la barra es desconocido o el atributo value no se establece. 

El siguiente ejemplo denota lo que te acabo de mencionar: 

CSS 

input:indeterminate { 
  background-color: lightgray; 
} 
progress:indeterminate { 
  color: orange; 
}

input:indeterminate: Se aplica a checkboxes cuando están en estado intermedio (ni marcado ni desmarcado) este selector aplica un fondo gris claro

progress:indeterminate: Se aplica a barras de progreso cuando no tienen un valor definido, en este caso se define un color anaranjado. su resultado puede verse cuando la barra de progreso no tiene atributo value o cuando está en proceso sin saber el progreso total

Es común usar estos selectores para dar feedback visual al usuario cuando el estado de estos elementos no está definido.

HTML 

<input type="checkbox" id="exampleCheckbox"> 
<progress id="exampleProgress"></progress>

JAVASCRIPT 

// Establecer el estado indeterminado para el checkbox mediante JavaScript 
document.getElementById('exampleCheckbox').indeterminate = true;

Tome en cuenta que para utilizar esta pseudo-clase, si o si, es necesario utilizar JavaScript 

Pseudo-clase :required 

Selecciona los elementos de formulario que son obligatorios. 

Ejemplo

CSS

input:required { 
    border: 2px solid red; 
}

HTML

<h1>Pseudo-clase :required  </h1>
    <form action="#" method="post">
       <label for="nombre">Nombre (requerido):</label>
       <input type="text" id="nombre" name="nombre" required>
       <br><br>
       <label for="email">Correo Electrónico (requerido):</label>
       <input type="email" id="email" name="email" required>
       <br><br>
       <label for="telefono">Teléfono (opcional):</label>
      <input type="tel" id="telefono" name="telefono">
      <br><br>
      <button type="submit">Enviar</button>
</form>

Pseudo-clase :optional 

Selecciona los elementos de formulario que no son obligatorios. 

Ejemplo: 

CSS

input:optional { 
    border: 1px solid blue; 
} 

HTML

 
<h1>Pseudo-clase :optional </h1>
<form action="#" method="post">
    <label for="nombre">Nombre (requerido):</label>
    <input type="text" id="nombre" name="nombre" required>
    <br><br>
    
    <label for="email">Correo Electrónico (opcional):</label>
    <input type="email" id="email" name="email">
    <br><br>
    
    <label for="telefono">Teléfono (opcional):</label>
    <input type="tel" id="telefono" name="telefono">
    <br><br>
    
    <button type="submit">Enviar</button>
</form>

Pseudo-clase :valid 

Selecciona los elementos de formulario que tienen un valor válido y  el mismo cumple con los requisitos estableceidos. 

Ejemplo:

CSS

input:valid { 
    border-color: green; 
} 

HTML

<h1>Formulario de Ejemplo</h1>
   <form action="#" method="post">
      <label for="email">Correo Electrónico (requerido, formato válido):</label>
     <input type="email" id="email" name="email" required>
     <br><br>
            
     <label for="edad">Edad (solo números, opcional):</label>
     <input type="number" id="edad" name="edad" min="1" max="100">
<br><br>
                                                                                                                                                                                                 <label for="telefono">Teléfono (opcional, debe tener al menos 10 dígitos):</label>
<input type="tel" id="telefono" name="telefono" pattern="\d{10,}">
<br><br>
            
<button type="submit">Enviar</button>
</form>

Pseudo-clase :invalid

Selecciona los elementos de formulario que tienen un valor no válido. 

Ejemplo

CSS

input:invalid { 
    border-color: red; 
} 

HTML

<h1>Pseudo-clase :invalid</h1>
 <form action="#" method="post">
    <label for="email">Correo Electrónico (requerido, formato válido):</label>
    <input type="email" id="email" name="email" required>
    <br><br>
        
    <label for="edad">Edad (solo números, opcional):</label>
    <input type="number" id="edad" name="edad">
    <br><br>
        
     <label for="telefono">Teléfono (opcional, debe tener al menos 10 dígitos):</label>
     <input type="tel" id="telefono" name="telefono" pattern="\d{10,}">
      <br><br>
        
    <button type="submit">Enviar</button>
</form>

Pseudo-clase :in-range 

Selecciona los elementos de tipo input con valores que están dentro de un rango válido, esto se verifica por medio de los atributos min y max. 

Ejemplo

CSS

input:in-range { 
    background-color: black; 
} 

HTML

<label for="rangeInput">Selecciona un valor (1-10):</label>
<input type="number" id="rangeInput" min="1" max="10" value="5">

El atributo type="number" en el input asegura que el usuario solo pueda ingresar valores numéricos.

Los atributos min="1" y max="10" establecen el rango, por lo que el estilo in-range solo se aplicará cuando el valor esté dentro de este rango.

El CSS input:in-range aplica el fondo negro solo cuando el valor está dentro del rango especificado.

Pseudo-clase :out-of-range

Selecciona los elementos de tipo input cuyos valores están fuera de un rango válido, esto también se verifica mediante los atributos min y max. 

Ejemplo: 

CSS

input:out-of-range { 
    background-color: lightcoral; 
} 

La pseudo-clase input:out-of-range aplica el fondo color lightcoral cuando el valor del input está fuera del rango especificado (en este caso, fuera de 1 a 10).

Si el usuario ingresa un valor menor a 1 o mayor a 10, el fondo del input cambiará a lightcoral.

HTML

<label for="rangeInput">Selecciona un valor (1-10):</label>
<input type="number" id="rangeInput" min="1" max="10" value="5">

Pseudo-clase :read-only 

Selecciona los elementos de formulario que son de solo lectura. 

Ejemplo: 

CSS

input:read-only { 
    background-color: black; 
}

El atributo readonly en el input activa el estilo input:read-only, aplicando un fondo negro al campo.

Este estilo permite que el input se vea diferente cuando está en modo de solo lectura, indicando visualmente que el usuario no puede modificar su contenido.

HTML

<label for="readonlyInput">Campo solo lectura:</label>
<input type="text" id="readonlyInput" value="Este campo es de solo lectura" readonly>

Pseudo-clase :read-write 

Selecciona los elementos de formulario que pueden ser modificados o editados, al contrario del atributo anterior :read-only que es de solo lectura. 

Ejemplo: 

CSS

input:read-write { 
    background-color: white; 
} 

La pseudo-clase input:read-write aplica el fondo blanco a los campos que pueden ser editados (que no tienen el atributo readonly).

Este estilo distingue visualmente los campos editables de los campos de solo lectura.

HTML

<label for="editableInput">Campo editable:</label>
<input type="text" id="editableInput" value="Este campo es editable">

Pseudo-clase :placeholder-shown

Se aplica a un campo de entrada (<input> o <textarea>) que tiene un marcador de posición (placeholder) visible. 

Ejemplo: 

CSS

input:placeholder-shown { 
  border-color: gray; 
} 

HTML

<label for="placeholderInput">Campo con placeholder:</label>
<input type="text" id="placeholderInput" placeholder="Escribe aquí...">

Pseudo-clase :user-valid y :user-invalid (experimentales) 

Estas pseudo-clases permiten diferenciar si un valor ingresado por el usuario cumple o no con las restricciones, considerando la interacción del usuario. Actualmente, a la fecha de publicación de este post, están en una fase experimental y su uso depende del soporte del navegador. 

Ejemplo: 

CSS

input:user-valid { 
  border-color: green; 
} 
input:user-invalid { 
  border-color: red; 
} 

El borde se volverá verde cuando el input sea válido y rojo cuando sea inválido, después de que el usuario interactúe con él

HTML

<form>
    <input type="email" required placeholder="Email">
    <input type="tel" pattern="[0-9]{9}" required placeholder="Teléfono">
</form>

Pseudo-clase :focus-visible 

Selecciona un elemento que tiene el foco y que debería ser visualmente resaltado. Está especialmente diseñada para mejorar la accesibilidad y se activa cuando el usuario navega por el sitio usando el teclado o ciertos dispositivos de entrada.  

No se activa cuando el usuario hace clic con el ratón, lo que ayuda a evitar el estilo de foco innecesario. 

Ejemplo: 

CSS

input:focus-visible { 
  outline: 3px solid #0f0; 
} 

Cuando uses el teclado (por ejemplo con Tab) para navegar entre los inputs, verás un contorno verde de 3px. Esto ayuda a la accesibilidad mostrando qué elemento está seleccionado.

HTML

 <input type="text" placeholder="Escribe aquí">
 <input type="email" placeholder="Email">

Pseudo-clase :focus-within:

Selecciona un elemento si él mismo o cualquiera de sus descendientes tiene el foco. Es útil cuando quieres aplicar estilos al contenedor de un conjunto de campos de formulario o a cualquier elemento superior cuando uno de sus elementos hijos está enfocado. 

Ejemplo: 

CSS

form:focus-within { 
  border: 2px solid #ff0; 
} 

Cuando cualquier input dentro del formulario reciba el foco, todo el borde del formulario se volverá amarillo. Al perder el foco volverá a su color gris original.

HTML

 <form>
    <input type="text" placeholder="Nombre">
    <input type="email" placeholder="Email">
</form>

Pseudo-clases de negación y exclusión :not()

Selecciona todos los elementos que no coinciden con el selector especificado, es decir que hara lo contrario a lo que le indiquemos. 

Ejemplo: 

CSS

p:not(.intro) { 
    color: grey; 
} 

Todos los párrafos que NO tengan la clase «intro» se mostrarán en color gris, mientras que el párrafo con la clase «intro» se mantiene en negro.

HTML

<p class="intro">Este párrafo es la intro y se mantiene en negro.</p>
<p>Este párrafo será gris.</p>
<p>Este también será gris.</p>
<p>Y este también será gris.</p>

Pseudo-clases para animaciones y contenido secuencial

Pseudo-clase :current 

Selecciona el elemento que está actualmente activo o visible en una secuencia de contenido, como presentaciones de diapositivas, capítulos de video/audio, o cualquier otro contenido secuencial que el navegador esté reproduciendo.  

Esta pseudo-clase pensada para el contenido multimedia donde se muestran múltiples elementos de forma progresiva. 

Ejemplo: 

CSS

.slide:current { 
  opacity: 1; 
  transition: opacity 0.5s ease-in-out; 
} 

En este ejemplo, la diapositiva actual en una presentación será totalmente visible mientras que las demás pueden tener un estilo diferente  

HTML

<div class="slider">
    <div class="slide" id="slide1">Slide 1</div>
    <div class="slide" id="slide2">Slide 2</div>
    <div class="slide" id="slide3">Slide 3</div>
</div>

Pseudo-clase :past 

Selecciona elementos que ya han sido reproducidos o mostrados, es decir, aquellos que están en el «pasado» en una secuencia de contenido, como una diapositiva anterior o una parte de un video que ya ha sido visualizada. 

Ejemplo: 

CSS

.slide:past { 
  opacity: 0.5; 
} 

Aquí, las diapositivas que ya han pasado tendrán una opacidad reducida, indicando que ya han sido vistas. 

HTML

<div class="slider">
    <div class="slide" id="slide1">Slide 1</div>
    <div class="slide" id="slide2">Slide 2</div>
    <div class="slide" id="slide3">Slide 3</div>
</div>

Pseudo-clase :future 

Selecciona los elementos que aún no han sido reproducidos o mostrados, es decir, aquellos que están programados para mostrarse en el «futuro» en una secuencia de contenido. 

Ejemplo: 

.slide:future { 
  opacity: 0; 
} 

HTML

 <div class="slider">
    <div class="slide" id="slide1">Slide 1</div>
    <div class="slide" id="slide2">Slide 2</div>
    <div class="slide" id="slide3">Slide 3</div>
 </div>

Las diapositivas futuras tendrán una opacidad cero hasta que se conviertan en la diapositiva activa. 

Pseudo-clase :target 

Selecciona un elemento que es el destino de un enlace con un identificador de ancla (#). Es útil para crear animaciones o transiciones basadas en la navegación entre secciones dentro de la misma página. 

Ejemplo: 

#section:target { 
  background-color: yellow; 
  transition: background-color 0.5s ease; 
}

HTML

<h1>Navegación de Secciones</h1>
  <p><a href="#section">Ir a la sección destacada</a></p>

<div id="section">
    <h2>Sección Destacada</h2>
    <p>Este es el contenido de la sección. Al hacer clic en el enlace, el fondo cambiará de color.</p>
</div>

En este caso, cuando el usuario navegue a #section, el fondo cambiará de color con una animación suave. 

Pseudo-clases especiales 

A continuación, te mencionare algunas de las clases que se consideran especiales en CSS debido a la función que estas realizan, sin embargo, veras listadas algunas que ya cubrimos antes, pero de igual forma es importante que sepas a que grupo pertenecen 

Pseudo-clase :root 

Selecciona el elemento raíz del documento, que generalmente es el elemento <html> y permite la aplicación de estilos a todo el documento o definir variables globales. 

Ejemplo 

CSS

:root { 
    --main-color: blue; 
} 

HTML

<h1>Uso de Variables CSS</h1>
  <p>Este párrafo utiliza la variable <code>--main-color</code> definida en <code>:root</code> para su color de texto.</p>
  <a href="#" class="button">Botón con color principal</a>

Pseudo-clase :empty 

Selecciona elementos que no tienen hijos, incluyendo texto o nodos de espacio en blanco. Es útil para aplicar estilos a contenedores vacíos o para evitar el renderizado de ciertos elementos vacíos. 

Ejemplo: 

CSS

div:empty { 
    display: none; 
} 

HTML

<h1>Ejemplo de Selector :empty</h1>

  <div class="content">
    <p>Este div tiene contenido, por lo tanto, es visible.</p>
  </div>

  <div class="content">
    <!-- Este div está vacío y será ocultado por el selector :empty -->
  </div>

  <div class="content">
    <p>Otro div con contenido visible.</p>
  </div>

Pseudo-clase :scope 

selecciona el elemento que está definido como el «alcance» (scope) de un conjunto de selectores. Es útil cuando necesitas trabajar con selectores que dependen de un contexto específico en el DOM 

Ejemplo: 

CSS

:scope > p { 
  color: blue; 
} 

HTML

  <div class="container">
    <p>Este párrafo es hijo directo de .container y será azul.</p>
    <div class="nested">
      <p>Este párrafo está en un div anidado, por lo que no se aplicará el color azul.</p>
    </div>
    <p>Otro párrafo hijo directo de .container que también será azul.</p>
  </div>

 
Pseudo-clase :fullscreen 

Selecciona un elemento que está en modo de pantalla completa (cuando el usuario ha activado el modo pantalla completa para ese elemento mediante las APIs del navegador).  

Se activa cuando un elemento, como un video, una imagen o cualquier otro contenido, entra en pantalla completa utilizando la API de pantalla completa de JavaScript (por ejemplo, element.requestFullscreen()). 

Ejemplo: 

CSS

video:fullscreen { 
  width: 100vw; 
  height: 100vh; 
  object-fit: cover; 
} 

En este ejemplo, cuando un elemento <video> entra en modo de pantalla completa, se ajustará para ocupar todo el ancho y alto de la ventana y escalar su contenido de manera adecuada. 

HTML

 <h1>Ejemplo de Video en Pantalla Completa</h1>

  <video controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
  </video>

 
Pseudo-clase :is(selector) 

Selecciona cualquier elemento que coincida con uno o más de los selectores en su argumento. Simplifica la sintaxis de múltiples selectores. 

Ejemplo 

CSS

:is(h1, h2, h3) { 
  color: red; 
} 

• El selector :is(h1, h2, h3) aplica el color rojo a todos los elementos <h1>, <h2>, y <h3>.
• Este selector simplifica la aplicación de estilos a múltiples elementos, permitiendo evitar múltiples selectores separados.
• Los encabezados <h1>, <h2>, y <h3> se mostrarán en rojo, mientras que otros elementos, como <p> y <h4>, no se verán afectados.

HTML

<p>Este es un párrafo de texto que no se verá afectado.</p>
  <h2>Encabezado 2</h2>
  <p>Otro párrafo que tampoco será afectado por el estilo.</p>
  <h3>Encabezado 3</h3>
  <h4>Encabezado 4</h4> <!-- Este no se verá afectado porque no está en el selector :is -->

Pseudo-elementos en CSS 

Los pseudo-elementos en CSS son una manera de seleccionar y aplicar estilos a partes específicas de un elemento, como el primer carácter, la primera línea de texto, o incluso insertar contenido antes o después del contenido real de un elemento.  

A diferencia de las pseudo-clases, que seleccionan elementos basados en su estado o posición, los pseudo-elementos permiten estilizar partes específicas de un elemento o generar contenido adicional. 

A continuación, te presento los pseudo-elementos más importantes en CSS 

Pseudo-elemento ::before 

Se utiliza para insertar contenido antes del contenido de un elemento, justo dentro de su área de contenido. Se usa a menudo para agregar iconos, texto decorativo, o cualquier otro contenido antes del elemento real sin alterar el HTML. 

Sintaxis 

elemento::before { 
    content: "texto o símbolo"; 
    propiedad: valor; 
} 

Ejemplo  

h2::before { 
    content: "▶ "; 
    color: red; 
} 

Este código insertará una flecha antes de cada encabezado <h2>, sin necesidad de modificar el HTML. 

Pseudo-elemento ::after 

El pseudo-elemento ::after es similar a ::before, pero inserta el contenido después del contenido del elemento, justo dentro de su área de contenido. Se utiliza comúnmente para insertar iconos o elementos decorativos al final de un bloque de contenido. 

Sintaxis 

elemento::after { 
    content: "texto o símbolo"; 
    propiedad: valor; 
} 

Ejemplo  

CSS

blockquote::after { 
    content: "— Autor desconocido"; 
    display: block; 
    text-align: right; 
    font-style: italic; 
} 

Este ejemplo agrega una firma estilizada al final de cada bloque de citas (<blockquote>). 

HTML

<h1>Ejemplo de Blockquote con ::after</h1>

  <blockquote>
    La vida es lo que pasa mientras estás ocupado haciendo otros planes.
  </blockquote>

Pseudo-elemento ::first-line 

El pseudo-elemento ::first-line aplica estilos a solo la primera línea del texto de un elemento. Este pseudo-elemento es útil cuando deseas destacar o estilizar la primera línea de un párrafo o de cualquier bloque de texto.

Sintaxis 

elemento::first-line { 
    propiedad: valor; 
} 

Ejemplo  

CSS

p::first-line { 
    font-weight: bold; 
    font-size: 1.2em; 
} 

• p::first-line selecciona solo la primera línea de texto de cada párrafo (<p>), aplicando estilos específicos.
• font-weight:bold y font-size: 1.2em hacen que la primera línea aparezca en negrita y con un tamaño de fuente más grande.

Este estilo solo afecta a la primera línea y se ajusta automáticamente según el ancho del párrafo.

HTML

<h1>Ejemplo de Estilo en la Primera Línea</h1>

  <p>Esta es la primera línea de texto en este párrafo y se verá resaltada en negrita y con un tamaño de fuente mayor. El resto del texto mantendrá el estilo normal.</p>

  <p>Otro párrafo de ejemplo donde la primera línea también se verá en negrita y más grande, pero el resto del texto no se verá afectado.</p>

Este código hará que la primera línea de cada párrafo sea más grande y esté en negrita. 

Pseudo-elemento::first-letter 

::first-letter aplica estilos al primer carácter de un bloque de texto. Se usa a menudo en diseños tipográficos avanzados para crear efectos como letras capitulares (drop caps), que son comunes en revistas y libros. 

Sintaxis 

elemento::first-letter { 
    propiedad: valor; 
} 

Ejemplo  

CSS

p::first-letter { 
    font-size: 2em; 
    font-weight: bold; 
    color: blue; 
    float: left; 
    margin-right: 0.1em; 
} 

• p::first-letter selecciona solo la primera letra de cada párrafo (<p>) y le aplica un estilo único.
• font-size:2em, font-weight:bold, y color:blue agrandan, resaltan y colorean la primera letra.
• float:left y margin-right:0.1em hacen que la primera letra se alinee a la izquierda y cree un pequeño espacio con el resto del texto, dándole un efecto de «capitular» (como en libros o revistas).

HTML

<h1>Ejemplo de Estilo en la Primera Letra</h1>

  <p>Este es un párrafo de ejemplo donde la primera letra está estilizada para destacar en un tamaño mayor, con negrita y color azul. El resto del texto mantiene el estilo normal, pero la primera letra llama la atención.</p>

Pseudo-elemento ::selection 

::selection aplica estilos a la parte del texto que el usuario selecciona con el cursor (como al arrastrar el ratón para seleccionar texto).

Es útil para personalizar la experiencia de selección de texto en tu sitio, cambiando el color de fondo o el color del texto seleccionado. 

Sintaxis 

::selection { 
    propiedad: valor; 
} 

Ejemplo 

CSS

::selection { 
    background-color: yellow; 
    color: black; 
} 

• background-color:yellow y color:black establecen el fondo en amarillo y el texto en negro para cualquier selección en la página.

HTML

  <h1>Ejemplo de Estilo para Selección de Texto</h1>

  <p>Selecciona cualquier parte de este texto para ver el estilo personalizado de selección. En lugar del color de selección predeterminado, verás un fondo amarillo y el texto en negro.</p>

  <p>Este estilo de selección ayuda a destacar el contenido cuando los usuarios seleccionan texto, lo cual es útil para mejorar la accesibilidad o la estética de la página.</p>

Este código cambia el color de fondo a amarillo y el texto a negro cuando el usuario selecciona cualquier parte del texto. 

Pseudo-elemento ::placeholder 

Es útil para personalizar el aspecto del texto de ayuda que aparece dentro de los campos de formulario antes de que el usuario comience a escribir. 

Sintaxis 

input::placeholder { 
    propiedad: valor; 
} 

Ejemplo 

CSS

input::placeholder { 
    color: grey; 
    font-style: italic; 
} 

HTML

 <input type="text" placeholder="Escribe aquí...">

Este código hace que el texto de los marcadores de posición en los campos de entrada sea gris y en cursiva. 

Compatibilidad de los pseudo-elementos CSS 

Los pseudo-elementos son ampliamente compatibles con los navegadores modernos, pero es importante recordar que algunos, como ::selection, pueden tener ligeras variaciones en su soporte dependiendo del navegador. 

Los pseudo-elementos ::before y ::after son los más comúnmente utilizados y son completamente compatibles. Por lo demás, puedes estar tranquilo y elegir el que mejor se adapte a tus necesidades, ya que no encontrarás problemas con respecto a la compatibilidad.

Conclusión

Los selectores en CSS son una pieza fundamental para cualquier desarrollador web. Dominar su uso no solo facilita la aplicación de estilos, sino que también optimiza el rendimiento y organización del código. Al comprender cómo funcionan los distintos tipos de selectores y pseudo-clases, puedes crear interfaces más interactivas y responsivas, asegurando una mejor experiencia para los usuarios.

Espero que este recorrido te haya ayudado a visualizar el potencial de los selectores en CSS. Sigue practicando, y pronto te encontrarás aplicando estilos avanzados en tus propios proyectos con facilidad y confianza. Recuerda: el dominio de los selectores en CSS es un paso esencial para convertirte en un desarrollador más eficiente y creativo. ¡Buena suerte y sigue aprendiendo!

Por los momentos no queda más que felicitarte por haber llegado hasta el final, eso dice mucho de ti. Te animo a que continúes así, y verás que los frutos de tus esfuerzos se verán muy pronto. No olvides dejar tus comentarios y sugerencias; para mí es un placer leer y escuchar todo lo que aporte valor al blog, ya que la idea es crear una comunidad donde nos ayudemos unos a los otros. Nos vemos en un nuevo post. Sin más que decir, gracias totales.