nthchild.js 1.2 KB

1234567891011121314151617181920212223242526272829303132333435
  1. /*!
  2. {
  3. "name": "CSS :nth-child pseudo-selector",
  4. "caniuse": "css-sel3",
  5. "property": "nthchild",
  6. "tags": ["css"],
  7. "notes": [{
  8. "name": "Related Github Issue",
  9. "href": "https://github.com/Modernizr/Modernizr/pull/685"
  10. },{
  11. "name": "Sitepoint :nth-child documentation",
  12. "href": "https://www.sitepoint.com/atoz-css-screencast-nth-child/"
  13. }],
  14. "authors": ["@emilchristensen"],
  15. "warnings": ["Known false negative in Safari 3.1 and Safari 3.2.2"]
  16. }
  17. !*/
  18. /* DOC
  19. Detects support for the ':nth-child()' CSS pseudo-selector.
  20. */
  21. define(['Modernizr', 'testStyles'], function(Modernizr, testStyles) {
  22. // 5 `<div>` elements with `1px` width are created.
  23. // Then every other element has its `width` set to `2px`.
  24. // A JavaScript loop then tests if the `<div>`s have the expected width
  25. // using the modulus operator.
  26. testStyles('#modernizr div {width:1px} #modernizr div:nth-child(2n) {width:2px;}', function(elem) {
  27. var elems = elem.getElementsByTagName('div');
  28. var correctWidths = true;
  29. for (var i = 0; i < 5; i++) {
  30. correctWidths = correctWidths && elems[i].offsetWidth === i % 2 + 1;
  31. }
  32. Modernizr.addTest('nthchild', correctWidths);
  33. }, 5);
  34. });