https://takao.blog/es/tags/selector/Recent content in Selector on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/css-has-pseudo-selector-recipes/Tue, 10 Mar 2026 00:00:00 +0900https://takao.blog/es/web/css-has-pseudo-selector-recipes/<img src="https://takao.blog/img/thumbnail/css-has-pseudo-selector-recipes-es.png" alt="Featured image of post Recetas CSS creativas con el selector padre :has()" /><h2 id="cómo-funciona-has">Cómo funciona <code>:has()</code> </h2><p>La pseudo-clase <code>:has()</code> toma una lista de selectores y selecciona un elemento si contiene cierto descendiente o hermano. Soportada en todos los navegadores principales desde 2026.</p> <h2 id="receta-1-estilos-de-validación-de-formularios">Receta 1: Estilos de validación de formularios </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">form-group</span>:<span style="color:#a6e22e">has</span><span style="color:#f92672">(</span><span style="color:#f92672">input</span>:<span style="color:#a6e22e">invalid</span><span style="color:#f92672">)</span> { <span style="color:#66d9ef">border-left</span>: <span style="color:#ae81ff">3</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#e74c3c</span>; } </span></span></code></pre></div><p>Muestra/oculta mensajes de error y colorea bordes según el estado del input, sin JavaScript.</p> <h2 id="receta-2-layouts-dinámicos-de-tarjetas">Receta 2: Layouts dinámicos de tarjetas </h2><p>Tarjetas con imagen ajustan su padding automáticamente: <code>.card:has(img) { padding: 0; }</code></p>