Menu
I'm trying to use modernizr to test for :nth-child browser support but I'm not sure how to do it, I found this one http://jsfiddle.net/laustdeleuran/3rEVe/ which tests for :last-child but I don't know how to change it to detect :nth-child (I was also thinking about using it like that since I believe that browsers that don't support :last-child don't support :nth-child either but I'm not sure)
Can you guys help me? Thanks in advance!
502
Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
As per W3Schools CSS Selector Reference: p:nth-child(2) : Selects every <p> element that is the second child of its parent. p:nth-of-type(2) : Selects every <p> element that is the second <p> element of its parent.
We can access various properties of this object 'Modernizr' for feature detection using “Modernizr. featureName”. For example, Modernizr. video will return “true” if the browser supports the video element, and false if the browser doesn't.
If you look back to the earlier example nth-child(3n+1) , the CSS would be applied to every third element, initially offset by one. So for p:nth-child(3n + 1) the first p tag would be affected and then every third tag.
I just wrote a function to detect the :nth-child support for you
function isNthChildSupported(){
var result = false,
test = document.createElement('ul'),
style = document.createElement('style');
test.setAttribute('id', 'nth-child-test');
style.setAttribute('type', 'text/css');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('id', 'nth-child-test-style');
style.innerHTML = "#nth-child-test li:nth-child(even){height:10px;}";
for(var i=0; i<3; i++){
test.appendChild(document.createElement('li'));
}
document.body.appendChild(test);
document.head.appendChild(style);
if(document.getElementById('nth-child-test').getElementsByTagName('li')[1].offsetHeight == 10) {result = true;}
document.body.removeChild(document.getElementById('nth-child-test'));
document.head.removeChild(document.getElementById('nth-child-test-style'));
return result;
}
Usage:
isNthChildSupported() ? console.log('yes nth child is supported') : console.log('no nth child is NOT supported');
You can see this works in action here http://jsbin.com/epuxus/15
Also There is a difference between jQuery :nth-child and CSS :nth-child.
jQuery :nth-child is supported in any browser jQuery supports but CSS :nth-child is supported in IE9, Chrome, Safari and Firefox
84
I remember there was a Modernizr selectors plugin that tested for selectors support, but I can't find it right now. You can take a look at this: http://javascript.nwbox.com/CSSSupport/ which is similar.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
