Tener un “selector principal” en CSS se menciona regularmente como algo que CSS realmente podría usar. Siento que he tenido ese pensamiento muchas veces, pero luego, cuando le pregunto a mi cerebro por un caso de uso, me resulta difícil pensar en uno. Bueno, acabo de tener uno, así que pensé en documentarlo aquí.
Un padre / hijo clásico:
<div class="parent">
<div class="child"></div>
</div>Digamos que tiene mucho sentido que este padre tenga un desbordamiento oculto y también que el niño use el posicionamiento absoluto.
.parent {
overflow: hidden;
position: relative;
}
.child {
position: absolute;
}Ahora digamos que hay una circunstancia especial en la que el niño debe colocarse fuera del padre y aún ser visible. El desbordamiento oculto sigue siendo un buen valor predeterminado para la gran mayoría de situaciones, por lo que es mejor dejar esa regla en su lugar, pero en esta situación muy específica, debemos anular ese desbordamiento.
.special-child {
position: absolute;
bottom: -20px; /* needs to be slightly outside parent */
}
/* Not real, but just to make a point */
.special-child:parent(.parent) {
overflow: visible;
}El selector de arriba es falso, pero dice: “Seleccione el elemento principal de .special-child, ”Lo que permitiría anularlo según sea necesario. Tal vez sea así:
.parent < .special-child {
}… Que es seleccionar el elemento de la izquierda en lugar de la derecha. ¿Quién sabe? Probablemente ambos sean problemáticos de alguna manera y la sintaxis final sería otra cosa. O tal vez nunca lo conseguiremos. No tengo ni idea. Solo estoy documentando un caso de uso real que tuve.
Quizás esté pensando, “¿Por qué no usar otra clase especial en el padre?” Lo habría hecho, pero el padre estaba siendo inyectado por una biblioteca de terceros a través de una API que no ofrecía agregar una clase de mi elección. En última instancia, tuve que agregar la clase al padre escribiendo algo de JavaScript personalizado que consultara el DOM para encontrar el .special-child, busque el padre y luego agregue la clase allí.
¿Tienen todos otros casos de uso para un selector principal?
Aquí hay uno de Uzair Hayat:
Mi proyecto tiene un <input> que está envuelto en un<div>. El <div> tiene algunos elementos de diseño que deben entrar en vigor una vez que el <input> es en :focus. Podría haber usado ::before y ::after pseudoelementos, pero las entradas no los admiten ya que son elementos reemplazados. En este momento, utilizo JavaScript para detectar si la entrada está enfocada y aplicar una clase al div padre. Ojalá pudiera hacer …
input:focus:parent(div):after {
display: block;
/* display design changes when focused */
}