Lo último en el selector de padres CSS

La información más reciente que puedo encontrar con respecto a esto es el Borrador del Editor del Nivel 4 de W3C Selectors , pero, por lo que puedo ver, ya no menciona el selector principal.

Sé que hubo una encuesta de Google sobre esto , pero eso ya pasó.

¿Qué pasó con el selector de padres? ¿Alguna vez se introducirá o se habrá eliminado?

La encuesta culminó con el selector de materias (el nombre propio del famoso “selector padre”) que fue reemplazado por la #relational mucho más versátil :has() , que está documentada aquí (con un nombre de anclaje interesante, #relational , Me pregunto si eso se mantendrá).

Las implementaciones probablemente solo lleguen cuando la especificación para esta característica sea más estable. Actualmente, con cambios tan disruptivos como reemplazar por completo al selector de temas con una pseudoclase, no estoy seguro de que suceda pronto. Dicho esto, es probable que la pseudo-clase :has() se pegue, pero queda por ver si se puede implementar en CSS debido a su propia naturaleza. Consulte esta sección del mismo borrador para obtener información sobre los perfiles de implementación.


La razón :has() es más versátil es porque, con el selector de temas, nunca se dejó en claro en ningún borrador si un único selector complejo podría tener más de un selector de materias (ya que un solo selector complejo solo puede tener un tema) y / o si las pseudo-clases funcionales tales como :matches() aceptaron el selector de sujeto. Pero como una pseudoclase es un selector simple, usted sabe que :has() puede aceptarse en cualquier lugar donde se acepte una pseudoclase.

Como ejemplo, esto hace que los selectores sean teóricamente posibles de la siguiente manera:

 /* * Select any p * that is a sibling of a ul * that has more than one li child. */ ul:has(> li:nth-of-type(2)) ~ p, /* p follows ul */ p:has(~ ul:has(> li:nth-of-type(2))) /* p precedes ul */ 

Mientras que, usando el selector de sujeto, esto solo sería posible si :matches() aceptaba el selector de sujeto, que nunca se indicó directamente en la especificación:

 ul:matches(! > li:nth-of-type(2)) ~ p, /* p follows ul */ !p ~ ul:matches(! > li:nth-of-type(2)) /* p precedes ul */ 

También puede ver aquí por qué no me gusta el nombre “selector principal” para cualquiera de las formas del selector; puede usarse para mucho más .

De acuerdo con Wikipedia :

Los selectores no pueden ascender

Actualmente, CSS no ofrece forma de seleccionar un padre o antecesor de un elemento que satisfaga ciertos criterios. CSS Selectors Level 4, que todavía está en estado Working Draft, propone dicho selector, pero solo como parte del perfil selector “completo”, no como el perfil “rápido” utilizado en el estilo dynamic CSS. Un esquema de selector más avanzado (como XPath) habilitaría hojas de estilo más sofisticadas. Las principales razones por las cuales el Grupo de trabajo de CSS rechazó previamente propuestas para selectores principales están relacionadas con el rendimiento del navegador y los problemas de representación incremental.

En cuanto a cuándo se introducirá Selectors Level 4, aunque … bueno, depende de cuándo los principales navegadores implementan soporte para él. Y cuando suficientes usuarios actualizan a esas versiones del navegador.

Editar: vea esta respuesta para más información.

Bueno en CSS no hay selector de padres. Pero debido a un pequeño truco que puedo usar .childinternal : parent {background-color: yellow} en mi archivo CSS local sin profundizar en jquery o javascript.

El truco está un poco sucio porque altera el estilo del elemento padre (que no es lo que CSS hace) y no es una pseudo clase real. Pero en tu hoja de estilo css puedes usarla como si fuera.

Hay dos maneras de implementar (ambas mostradas). La primera es una pseudoclase: parent, esto solo se puede hacer en una hoja de estilo local debido a que no se permiten los malos psuedos de algunos navegadores.

El otro es uno que se ejecuta en todas las hojas de estilo y busca una ‘referencia de clase GetParent’.

Para mi funciona Normalmente tomo el primero, que es el más rápido.

Solución:

 $(function() { //First possibility when using local css file (=faster)// $.when($.get("your local filename.css")).done(function(response) { var spl = response.split(":parent"); if (spl.length > 1) { var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var eClas = $(clas).parent().attr('style'); eClas = eClas == undefined ? '' : (eClas + '').toString; $(clas).parent().attr('style', eClas + ';' + cs); } }); }); // second possibility looping all used css files for (var s = document.styleSheets.length - 1; s >= 0; s--) { var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || []; // IE support for (var c = 0; c < cssRules.length; c++) { if (cssRules[c].selectorText) { if (cssRules[c].selectorText.indexOf('.GetParent') > -1) { var spl = cssRules[c].cssText.split(".GetParent"); if (spl.length > 1) { var clas = $.trim((spl[0].split("}")[spl[0].split("}").length - 1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var cs = $.trim((spl[1].split("}")[0].split("{")[1]).replace(String.fromCharCode(10), '').replace(String.fromCharCode(13), '')); var eClas = $(clas).parent().attr('style'); eClas = eClas == undefined ? '' : (eClas + '').toString; $(clas).parent().attr('style', eClas + ';' + cs); } } } } } 
 .childinternal :parent { background-color: yellow } .childexternal .GetParent { Background-color: green } 
  
Not affected Main parent

Not affected parent (no parent selector)

local css file used (:parent selector) Only works on local files so not possible to show in this snippet

external css file used (.GetParent class selector)