nth-child-1.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE HTML>
  2. <html><head>
  3. <meta charset="utf-8">
  4. <title>Tests :nth-child(An+B) matching</title>
  5. <style type="text/css">
  6. div :nth-child(+/**/3n-2) { color:white; }
  7. div :nth-child(+3n/**/-2) { background-color:black; }
  8. div :nth-child(+3n/**/-2) { font-size:12px; }
  9. div :nth-child(+3n-/**/2) { text-decoration: underline; }
  10. div :nth-child(+3n-2/**/) { border-left-width: 1px; }
  11. div :nth-child(+3/**/n-2) { border-right-width: 1px; }
  12. div :nth-child(+3n/**/-2) { border-top-width: 1px; }
  13. div :nth-child(+3n/**/-2) { border-bottom-width: 1px; }
  14. div :nth-child(+3n-/**/2) { border-style: solid; }
  15. div :nth-child(+3n-2/**/) { border-color: blue; }
  16. /* valid but will not match anything */
  17. div :nth-child(-/**/n-2) { color:red; }
  18. div :nth-child(-n/**/-2) { color:red; }
  19. div :nth-child(-n/**/-2) { color:red; }
  20. div :nth-child(-n-/**/2) { color:red; }
  21. div :nth-child(-n-2/**/) { color:red; }
  22. div :nth-child(-1/**/n-2) { color:red; }
  23. div :nth-child(-1n/**/-2) { color:red; }
  24. div :nth-child(-1n/**/-2) { color:red; }
  25. div :nth-child(-1n-/**/2) { color:red; }
  26. div :nth-child(-1n-2/**/) { color:red; }
  27. /* invalid */
  28. div :nth-child(-/**/ n-2) { color:red; }
  29. div :nth-child(- /**/n-2) { color:red; }
  30. div :nth-child(+/**/ n-2) { color:red; }
  31. div :nth-child(+ /**/n-2) { color:red; }
  32. </style>
  33. </head>
  34. <body>
  35. <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>
  36. </body>
  37. </html>