mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 18:07:35 +00:00
Base: Add :nth-of-type and :nth-last-of-type test pages
This commit is contained in:
Sam Atkins
Andreas Kling
parent
ad5fb1fd7e
commit
2e23cce557
3 changed files with 354 additions and 1 deletions
175
Base/res/html/misc/nth-last-of-type.html
Normal file
175
Base/res/html/misc/nth-last-of-type.html
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>:nth-last-of-type test</title>
|
||||
<style>
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/** We have weird spacing inside parentheses to test parser. */
|
||||
.odd > p:nth-last-of-type(odd ),
|
||||
._2n-plus-1 > p:nth-last-of-type(2n+1),
|
||||
.even > p:nth-last-of-type( even),
|
||||
._2n > p:nth-last-of-type( 2n ),
|
||||
._3n > p:nth-last-of-type(3n),
|
||||
._2 > p:nth-last-of-type(2 ),
|
||||
._3n-plus-1 > p:nth-last-of-type( 3n + 1 ),
|
||||
._3n-minus-1 > p:nth-last-of-type( 3n -1),
|
||||
._minus-n-plus-3 > p:nth-last-of-type(-n+ 3),
|
||||
.n > p:nth-last-of-type(n), /** "n" is special case inside parser. */
|
||||
.plus-n > p:nth-last-of-type(+n), /** "+n" is special case inside parser. */
|
||||
.minus-n > p:nth-last-of-type(-n), /** "-n" is special case inside parser. */
|
||||
._0n-plus-1 > p:nth-last-of-type(-0n+1),
|
||||
.n-plus-2__minus-n-plus-3 > p:nth-last-of-type(+n + 2 ):nth-last-of-type( -n+3) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h4>p:nth-last-of-type(odd)</h4>
|
||||
<div class="odd">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(2n+1) - same as odd</h4>
|
||||
<div class="_2n-plus-1">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(even)</h4>
|
||||
<div class="even">
|
||||
<p>1 +</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(2n) - same as even</h4>
|
||||
<div class="_2n">
|
||||
<p>1 +</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(2)</h4>
|
||||
<div class="_2">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(3n)</h4>
|
||||
<div class="_3n">
|
||||
<p>1 +</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
<div>(div)</div>
|
||||
<div>(div)</div>
|
||||
<p>5</p>
|
||||
<p>6 </p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(3n+1)</h4>
|
||||
<div class="_3n-plus-1">
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
<div>(div)</div>
|
||||
<div>(div)</div>
|
||||
<p>5</p>
|
||||
<p>6 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(3n-1)</h4>
|
||||
<div class="_3n-minus-1">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
<div>(div)</div>
|
||||
<div>(div)</div>
|
||||
<p>5 +</p>
|
||||
<p>6</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(-n+3)</h4>
|
||||
<div class="_minus-n-plus-3">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(n)</h4>
|
||||
<div class="n">
|
||||
<p>1 +</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(-n) - same as n</h4>
|
||||
<div class="n">
|
||||
<p>1 +</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(+n) - same as n</h4>
|
||||
<div class="n">
|
||||
<p>1 +</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(0n+1)</h4>
|
||||
<div class="_0n-plus-1">
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-last-of-type(n+2):nth-last-of-type(-n+3)</h4>
|
||||
<div class="n-plus-2__minus-n-plus-3">
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
<div>(div)</div>
|
||||
<div>(div)</div>
|
||||
<p>5</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
176
Base/res/html/misc/nth-of-type.html
Normal file
176
Base/res/html/misc/nth-of-type.html
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>:nth-of-type test</title>
|
||||
<style>
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/** We have weird spacing inside parentheses to test parser. */
|
||||
.odd > p:nth-of-type(odd ),
|
||||
._2n-plus-1 > p:nth-of-type(2n+1),
|
||||
.even > p:nth-of-type( even),
|
||||
._2n > p:nth-of-type( 2n ),
|
||||
._3n > p:nth-of-type(3n),
|
||||
._2 > p:nth-of-type(2 ),
|
||||
._3n-plus-1 > p:nth-of-type( 3n + 1 ),
|
||||
._3n-minus-1 > p:nth-of-type( 3n -1),
|
||||
._minus-n-plus-3 > p:nth-of-type(-n+ 3),
|
||||
.n > p:nth-of-type(n), /** "n" is special case inside parser. */
|
||||
.plus-n > p:nth-of-type(+n), /** "+n" is special case inside parser. */
|
||||
.minus-n > p:nth-of-type(-n), /** "-n" is special case inside parser. */
|
||||
._0n-plus-1 > p:nth-of-type(-0n+1),
|
||||
.n-plus-2__minus-n-plus-4 > p:nth-of-type(+n + 2 ):nth-of-type( -n+4) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h4>p:nth-of-type(odd)</h4>
|
||||
<div class="odd">
|
||||
<p>1 +</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(2n+1) - same as odd</h4>
|
||||
<div class="_2n-plus-1">
|
||||
<p>1 +</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(even)</h4>
|
||||
<div class="even">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(2n) - same as even</h4>
|
||||
<div class="_2n">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(2)</h4>
|
||||
<div class="_2">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(3n)</h4>
|
||||
<div class="_3n">
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
<div>(div)</div>
|
||||
<div>(div)</div>
|
||||
<p>5</p>
|
||||
<p>6 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(3n+1)</h4>
|
||||
<div class="_3n-plus-1">
|
||||
<p>1 +</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(3n-1)</h4>
|
||||
<div class="_3n-minus-1">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(-n+3)</h4>
|
||||
<div class="_minus-n-plus-3">
|
||||
<p>1 +</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(n)</h4>
|
||||
<div class="n">
|
||||
<p>1 +</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(-n) - same as n</h4>
|
||||
<div class="n">
|
||||
<p>1 +</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(+n) - same as n</h4>
|
||||
<div class="n">
|
||||
<p>1 +</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(0n+1)</h4>
|
||||
<div class="_0n-plus-1">
|
||||
<p>1 +</p>
|
||||
<p>2</p>
|
||||
<div>(div)</div>
|
||||
<p>3</p>
|
||||
<div>(div)</div>
|
||||
<p>4</p>
|
||||
</div>
|
||||
|
||||
<h4>p:nth-of-type(n+2):nth-of-type(-n+4)</h4>
|
||||
<div class="n-plus-2__minus-n-plus-4">
|
||||
<p>1</p>
|
||||
<p>2 +</p>
|
||||
<div>(div)</div>
|
||||
<p>3 +</p>
|
||||
<div>(div)</div>
|
||||
<p>4 +</p>
|
||||
<p>5</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -90,8 +90,10 @@
|
|||
<li><a href="nth-child.html">:nth-child</a></li>
|
||||
<li><a href="nth-last-child.html">:nth-last-child</a></li>
|
||||
<li><a href="only-child.html">:only-child</a></li>
|
||||
<li><a href="last-of-type.html">:last-of-type</a></li>
|
||||
<li><a href="first-of-type.html">:first-of-type</a></li>
|
||||
<li><a href="last-of-type.html">:last-of-type</a></li>
|
||||
<li><a href="nth-of-type.html">:nth-of-type</a></li>
|
||||
<li><a href="nth-last-of-type.html">:nth-last-of-type</a></li>
|
||||
<li><a href="empty.html">:empty</a></li>
|
||||
<li><a href="root.html">:root</a></li>
|
||||
<li><a href="not-selector.html">:not</a></li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue