Selectors

[chriscoyier]

The reason I ultimately gave up on mine was that selectors are way harder to remove than properties and values. Ultimately it would be cool if this could negate selectors...

li:nth-last-child(2) {
     font-weight: bold;
}

so I guess it would find that, and either somehow remove it or go through each property and negate it:

li:nth-last-child(2) {
     font-weight: normal;
}

[SlexAxton]

seems like in this case we could just delete the whole rule, no?

[SlexAxton]

especially because 'normal' might not be the inherited style.

[SlexAxton]

/(.*?)\:nth-last-child\(\d\)\s*\{.*\}/ig or something similar would create the match, and then I could just remove the entire rule.

[chriscoyier]

That'd be ideal

[davatron5000]

Here's a list of all the selectors by CSS version http://www.w3.org/TR/css3-selectors/#selectors

Quite a bit of regex going on... but I think we tackle each selector one by one. I'll maybe work on those this evening.

[SlexAxton]

It may actually be easier than all that. Since we are going through, rule by rule, we could naiively do something like this:

if ( rule.match(/\:nth-last-child/g) ) {
   newRule = "";
}

BUT i think when you go through the rules that have multiple selectors, one of which is valid, another which isn't, it gets hairier.

li:nth-last-child(2),
li.last {
  border: bold;
}

So maybe we keep the rule but turn the pseudo selector into something nonsensical, but valid:

  rule.replace( /\:nth-last-child\(\d+\)/g, '.supermegafarts' );

li.supermegafarts,
li.last {
  border: bold;
}

[chriscoyier]

Important fact: if part of a selector is invalid, the whole thing becomes invalid.

li:nth-last-child(2),
strong {
   color: red;
}

In a browser that doesn't support :nth-list-child, strongs will NOT be red. That's a fact for every browser in the world that I know of, except IE 7. So not sure what the best plan would be there. But overall I think this becomes easier.

[SlexAxton]

oh, hmm. that actually might end up being harder now that i look at the code. :/ I'll see what I can do.

[SlexAxton]

OH EASY

Just replace the rule with something invalid! Then IE (if we supported it...) would technically have the right behavior, etc.

li:nth-last-child(2),
strong {
   color: red;
}

becomes

INVALIDSELECTOR:INVALID,
strong {
   color: red;
}

[chriscoyier]

That's perfect, and solves the IE 7 issue too.

[chriscoyier]

Although, obviously, the selector needs to be:

RAPTOR:PANCAKE