|
|
@@ -4,23 +4,58 @@
|
|
|
<title>:nth-last-child test</title>
|
|
|
<style>
|
|
|
/** We have weird spacing inside parentheses to test parser. */
|
|
|
- .odd > div:nth-last-child(odd ),
|
|
|
- ._2n-plus-1 > div:nth-last-child(2n+1),
|
|
|
- .even > div:nth-last-child( even),
|
|
|
- ._2n > div:nth-last-child( 2n ),
|
|
|
- ._3n > div:nth-last-child(3n),
|
|
|
- ._2 > div:nth-last-child(2 ),
|
|
|
- ._3n-plus-1 > div:nth-last-child( 3n + 1 ),
|
|
|
- ._3n-minus-1 > div:nth-last-child( 3n -1),
|
|
|
- ._minus-n-plus-3 > div:nth-last-child(-n+ 3),
|
|
|
- .n > div:nth-last-child(n), /** "n" is special case inside parser. */
|
|
|
- .plus-n > div:nth-last-child(+n), /** "+n" is special case inside parser. */
|
|
|
- .minus-n > div:nth-last-child(-n), /** "-n" is special case inside parser. */
|
|
|
- ._0n-plus-1 > div:nth-last-child(-0n+1),
|
|
|
- .n-plus-2__minus-n-plus-3 > div:nth-last-child(+n + 2 ):nth-last-child( -n+3),
|
|
|
+ .odd > div:nth-last-child(odd ) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._2n-plus-1 > div:nth-last-child(2n+1) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ .even > div:nth-last-child( even) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._2n > div:nth-last-child( 2n ) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._3n > div:nth-last-child(3n) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._2 > div:nth-last-child(2 ) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._3n-plus-1 > div:nth-last-child( 3n + 1 ) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._3n-minus-1 > div:nth-last-child( 3n -1) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._minus-n-plus-3 > div:nth-last-child(-n+ 3) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ /** "n" is special case inside parser. */
|
|
|
+ .n > div:nth-last-child(n) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ /** "+n" is special case inside parser. */
|
|
|
+ .plus-n > div:nth-last-child(+n) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ /** "-n" is special case inside parser. */
|
|
|
+ .minus-n > div:nth-last-child(-n) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ ._0n-plus-1 > div:nth-last-child(-0n+1) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
+ .n-plus-2__minus-n-plus-3 > div:nth-last-child(+n + 2 ):nth-last-child( -n+3) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
.acid3 > div:nth-last-child(-5n+3) {
|
|
|
background-color: lightblue;
|
|
|
}
|
|
|
+ /* Separate because only Safari supports this syntax right now */
|
|
|
+ .test-of > div:nth-last-child(3n+1 of .special) {
|
|
|
+ background-color: lightblue;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -152,9 +187,23 @@
|
|
|
<div>10</div>
|
|
|
<div>11</div>
|
|
|
<div>12</div>
|
|
|
- <div>13+</div>
|
|
|
+ <div>13 +</div>
|
|
|
<div>14</div>
|
|
|
<div>15</div>
|
|
|
</div>
|
|
|
+
|
|
|
+<h4>:nth-last-child(3n+1 of .special)</h4>
|
|
|
+<div class="test-of">
|
|
|
+ <div class="special">1</div>
|
|
|
+ <div class="special">2</div>
|
|
|
+ <div>(Ignored)</div>
|
|
|
+ <div class="special">3 +</div>
|
|
|
+ <div>(Ignored)</div>
|
|
|
+ <div class="special">4</div>
|
|
|
+ <div>(Ignored)</div>
|
|
|
+ <div>(Ignored)</div>
|
|
|
+ <div class="special">5</div>
|
|
|
+ <div class="special">6 +</div>
|
|
|
+</div>
|
|
|
</body>
|
|
|
</html>
|
Sam Atkins