¡Hola a todos, maravillosos desarrolladores! En esta publicación vamos a explorar el uso de :has() en tu próximo proyecto web. :has() es relativamente nuevo pero ha ganado popularidad en la comunidad front-end al brindar control sobre varios elementos en su interfaz de usuario. Echemos un vistazo a qué es la pseudoclase y cómo podemos utilizarla.

Sintaxis

El :has() La pseudoclase CSS ayuda a diseñar un elemento si se encuentra y se tiene en cuenta alguna de las cosas que estamos buscando en su interior. Es como decir, "Si hay algo específico dentro de este cuadro, entonces diseñe el cuadro de esta manera Y solo de esta manera".

:has(<direct-selector>) {
  /* ... */
}

El problema del estilo

En el pasado no teníamos forma de diseñar un elemento principal basado en un elemento secundario directo de ese padre con CSS o un elemento basado en otro elemento. En el caso de que tuviéramos que hacer eso, necesitaríamos usar algo de JavaScript y activar/desactivar las clases según la estructura del HTML. :has() resuelto ese problema.

Digamos que tienes un elemento de nivel 1 de encabezado (h1) que es el título de una publicación o algo de esa naturaleza en una página de lista de blogs, y luego tienes un nivel de encabezado 2 (h2) que le sigue directamente. Este h2 podría ser un subtítulo de la publicación. Si eso h2 está presente, es importante y directamente después del h1, es posible que desees resaltar h1. Antes habrías tenido que escribir una función JS.

Estilo de la vieja escuela – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Esta función JS busca todos los h1 que tienen un h2 proceder y aplicar una clase de contenido destacado para hacer el h1 Destacar como un artículo importante.

¡Nuevo y mejorado con CSS moderno que está de moda! Las capacidades de lo que podemos hacer en el navegador han avanzado mucho. Ahora podemos aprovechar CSS para hacer cosas que tradicionalmente tendríamos que hacer con JavaScript, no todo, pero sí algunas cosas.

Nueva Escuela – CSS

h1:has(+ h2) {
    color: blue;
}

¡Ponle algo :has()!

Ahora puedes usar :has() para lograr lo mismo que hizo la función JS. Este CSS busca cualquier h1 y usa el combinador de hermanos buscando un h2 que lo siga inmediatamente y agregue el color azul al texto. A continuación se muestran un par de casos de uso de cuándo :has() puede ser útil

:tiene Selector Ejemplo 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CO

h1:has(+ h2) {
    color: blue;
}

:tiene Selector Ejemplo 2

Muchas veces nosotros, como trabajadores de la web, estamos manipulando o trabajando con imágenes. Podríamos estar usando herramientas que Cloudinary proporciona hacer uso de varias transformaciones en nuestras imágenes, pero generalmente queremos agregar sombras paralelas, radios de borde y títulos (que no deben confundirse con texto alternativo en un atributo alt).

El siguiente ejemplo está usando :has() para ver si una figura o imagen tiene un elemento figcaption y, si lo tiene, aplica algo de fondo y un radio de borde para que la imagen se destaque.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CO

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Puedo :has() eso?

Puedes ver eso :has() tiene un gran soporte en los navegadores modernos.

:has() ¡en la comunidad!

Me comuniqué con mi red en Twitter para ver cómo estaban usando mis compañeros :has() en su trabajo diario y esto es lo que tenían que decir al respecto.

svg:has(> #Mail) {
  stroke-width: 1;
}

Es fantástico ver cómo los miembros de la comunidad utilizan CSS moderno para resolver problemas del mundo real, ¡y también felicitamos a Abbey por usarlo por razones de accesibilidad!

Cosas a tener en cuenta

Hay algunos puntos clave a tener en cuenta al utilizar :has() Viñetas a las que se hace referencia desde MDN.

• La pseudoclase adquiere la especificidad del selector más específico en su argumento.
• Si :has() La pseudoclase en sí no es compatible con un navegador, todo el bloque selector fallará a menos que :has() está en una lista de selección indulgente, como en :is() y :where()
• El :has() La pseudoclase no se puede anidar dentro de otra. :has() 
• Los pseudoelementos tampoco son selectores válidos dentro :has() y los pseudoelementos no son anclajes válidos para :has()

Conclusión

Aprovechar el poder de CSS, incluidas funciones avanzadas como :has() pseudoclase, nos permite crear experiencias web excepcionales. Los puntos fuertes de CSS residen en su cascada y especificidad... la mejor parte, que nos permite aprovechar todo su potencial. Al adoptar las capacidades de CSS, podemos impulsar el diseño y el desarrollo web, desbloqueando nuevas posibilidades y creando interfaces de usuario innovadoras.

enlaces:

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
• PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
• PlatoESG. Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
• PlatoSalud. Inteligencia en Biotecnología y Ensayos Clínicos. Accede Aquí.
• Fuente: https://css-tricks.com/the-power-of-has-in-css/