---
title: ':has'
slug: 'Web/CSS/:has'
tags:
  - CSS
  - Experimental
  - Pseudo clase
  - Referencia
  - Selectores CSS
translation_of: 'Web/CSS/:has'
---
<p>{{ CSSRef() }}{{SeeCompatTable}}</p>

<h2 id="Summary" name="Summary">Resumen</h2>

<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> CSS<strong><code>:has()</code> </strong>representa un elemento si cualquiera de los selectores, en relación con el {{cssxref(":scope")}} del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase :<code>has()</code> tomo un selector como argumento.</p>

<h2 id="Syntax" name="Syntax">Síntaxis</h2>

<pre>:has(<em>selector_list</em>) { propiedades de estilo }</pre>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<p>El siguiente selector  selecciona únicamente los elementos {{HTMLElement("a")}}  que contienen {{HTMLElement("img")}} hijo:</p>

<pre>a:has(&gt; img)
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table>
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#relational', ':has()') }}</td>
   <td>{{ Spec2('CSS4 Selectors') }}</td>
   <td>Definición Inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre los distintos navegadores</h2>

{{Compat("css.selectors.has")}}