// ul {background: #c2f060;color: #5d5f2e;}\n\
#ex12 div.example input[type="text"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex13 div.example input[type="password"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex14 div.example input[type="radio"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex15 div.example input[type="checkbox"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex16 div.example input[type="file"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex17 div.example input[type="button"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex18 div.example input[type="image"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex19 div.example input[type="reset"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex20 div.example input[type="submit"] {background: #c2f060;border: 1px solid #c2f060;color: #5d5f2e;}\n\
#ex21 div.example a[href$=".jpg"] {background: #c2f060;color: #5d5f2e;}\n\
‘});

//]]>

Is the above the way you would have coded it?

I did find an oldish plugin called pseudo that supports :before and :after.

I second the motion for a updated article incorporating all the changes. A few examples in the README file would be a great help.

I am having much trouble getting this to work. Doesn’t this example have one too many/few right/left curley brackets?

$(document).ready(function() {
$(document).superSelectify({childClass: “child-element”, manualSelectors: ‘div.example > ul, ul.sample li:first, input[type="text"], input[type="password"]‘}});
});

From reading the code, I didn’t notice anything for :before. Is it supported?

RE: IE Mac, it’s not being used anymore, I think. But from an accessibility standpoint, a lot of people hides some or all CSS from it, to make the content at least readable and navigable by the small % of people using it.

Mind posting your test case for background images for me somewhere? I’m not quite sure what’d be causing those symptoms, offhand.

I’ll look at the import problem. It’s possible that the import syntax you use is tripping up the regular expression for comment removal – is that the old commented backslash trick to hide from IE5/Mac? Man, I didn’t realize that browser was still getting use. :)

Can get this to work, but it seems to be stripping all my css background-images out in IE (at least, when I preview the file locally)!?

Also, I tend to pull in CSS using:

/*\*/
@import “../assets/css/layout.css”;
/**/

but it doesn’t work when I do this.

Any thoughts? Thanks :)

The quick example mcm_ham had posted over in Mozillazine prompted a brainstorm, and I managed to solve the biggest limitation in SuperSelectors (needing to have duplicate style rules in your CSS).

SuperSelectors will now create the CSS for you – this means that you can write rules like div.example > div input[type="text"] {background: #f0f;} and have it just work – even in IE6!

http://forums.mozillazine.org/viewtopic.php?f=25&t=1591615

Yes, it helps. I’ve used that technique before, albeit manually.

Indeed, it helps de-clutter the HTML, but as you state, one still has a cluttered CSS file.

As of now, I think I’m going to grin and bear it. If we’re supporting IE6, then we’re just going to have to deal with bloated CSS. Hopefully that’ll be yet-another-argument to drop IE6 support soon.

One can hope. ;o)