nth-child-1.html - mozsearch

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html><head>

    <meta charset="utf-8">

    <title>Tests :nth-child(An+B) matching</title>

    <style type="text/css">

    div :nth-child(+3n/**/-2)  { background-color:black; }

    div :nth-child(+3n/**/-2)  { font-size:12px; }

    div :nth-child(+3n-/**/2)  { text-decoration: underline; }

    div :nth-child(+3n-2/**/)  { border-left-width: 1px; }

    div :nth-child(+3n/**/-2) { border-top-width: 1px; }

    div :nth-child(+3n/**/-2) { border-bottom-width: 1px; }

    div :nth-child(+3n-/**/2) { border-right-width: 1px; }

    div :nth-child(+3n-2/**/) { border-style: solid; border-color: blue;}

    /* valid but will not match anything */

    div :nth-child(-n/**/-2)  { color:red; }

    div :nth-child(-n/**/-2)  { color:red; }

    div :nth-child(-n-/**/2)  { color:red; }

    div :nth-child(-n-2/**/)  { color:red; }

    div :nth-child(-1n/**/-2) { color:red; }

    div :nth-child(-1n/**/-2) { color:red; }

    div :nth-child(-1n-/**/2) { color:red; }

    div :nth-child(-1n-2/**/) { color:red; }

    /* invalid */

    div :nth-child(-/**/ n-2) { color:red; }

    div :nth-child(- /**/n-2) { color:red; }

    div :nth-child(+/**/ n-2) { color:red; }

    div :nth-child(+ /**/n-2) { color:red; }

    div :nth-child(+3/**/n-2) { color:red; }

    div :nth-child(-/**/n-2) {color: red;}

    </style>

</head>

<body>

<div><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x></div>

</body>

</html>