Latest on CSS parent selector

Question

The most recent information I can find regarding this is the W3C Selectors Level 4 Editor’s Draft, but, as far as I can see, it doesn\'t mention the parent selector anymore.

Answer 1

Well in css there is no parent selector. But due to a little trick I can use .childinternal :parent { background-color: yellow } in my local CSS file without going to deep into jquery or javascript.

The trick is a bit dirty because it alters the style of the parent element (which is not what CSS does) and is not a real pseudo class. But in your css stylesheet you can use it as of it were.

There are two ways of implementing (both shown) The first one is a pseudo class :parent this can only be done on a local stylesheet because of the 'dont allow bad psuedos' of some browsers.

The otherone is one that runs over all stylesheets checking for a 'GetParent class reference'.

For me it works. I normally take the first one, which is the fastest.

Solution:

$(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)