Search code examples
internet-explorercsscss-selectorsselectivizr

Troubles getting Selectivizr to Work

I am having troubles getting Selectivizr to work even with a very simple page. What did I do wrong?

http://jiewmeng.kodingen.com/playground/selectivr.html

<html>
<head>
    <link rel="stylesheet" href="selectivr.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
      <script src="selectivizr.js"></script>
    <![endif]--> 

</head>

<body>
    <h1>Hello World</h1>
    <p>Paragraph 1</p>

    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
</body>
</html>

CSS

p:nth-child(2n+2) { color: red }
Solution

  • Selectivizr only works when your page is in strict mode. Because you haven't given your page a doctype declaration, it's loading in Quirks mode, which means Selectivizr hasn't loaded.

    Simply add <!DOCTYPE html> before your opening html tag, and Selectivizr will work.