Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
// selectorSupported lovingly lifted from the mad italian genius, diego perini
function selectorSupported(selector){
var support, link, sheet, doc = document,
root = doc.documentElement,
head = root.getElementsByTagName('head')[0],
impl = doc.implementation || {
hasFeature: function() {
return false;
link = doc.createElement("style");
link.type = 'text/css';
(head || root).insertBefore(link, (head || root).firstChild);
sheet = link.sheet || link.styleSheet;
if (!(sheet && selector)) return false;
support = impl.hasFeature('CSS2', '') ?
function(selector) {
try {
sheet.insertRule(selector + '{ }', 0);
sheet.deleteRule(sheet.cssRules.length - 1);
} catch (e) {
return false;
return true;
} : function(selector) {
sheet.cssText = selector + ' { }';
return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0;
return support(selector);
return selectorSupported(':target');

Strange but it returns false on :nth-child on chrome 14 but true on :last-child for example, should it wok properly with :nth-child?


Nvm I actually need to test for :nth-child(n)




So I am not sure if anyone cares about this but just in case. I was trying to use this test to see if attribute selectors were supported input[type='text'] but ie7 was saying that it didn't even though it did. So I checked out how was doing their selector tests and ripped out some of their stuff.

First I have styles defined for input[type='text'] {padding: 10px} in an external stylesheet that is loaded before Modernizr. Then I add this test:

Modernizr.addTest('attribute-selector', function () {
          defaultView = document.defaultView,
          element = document.createElement('input'),
          body = document.createElement('body'),
          style = 'padding';

        element.type = 'text';

        if (defaultView && defaultView.getComputedStyle) {
          var css = defaultView.getComputedStyle(element, null);
          value = css ? css.getPropertyValue(style) : null;
        } else if (element.currentStyle) {
          value = element.currentStyle[style];

        return value === '10px';

I could be doing something wrong with the above Gist but in case any one else tries to go down this path maybe this will help you.


I'm sure this works great - but I can implement... an example would be very useful...




Awesome function, thank you very much.
Also thanks to javier, I wanted to test exaclty what he found, :nth-child(n).


This doesn't work on IE9:

>> selectorSupported('div ~ div')
>> selectorSupported('div + div')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.