HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
$ pwd: D:/HostingSpaces/SBogers10/topswtw.komma.pro/vendor/dompdf/dompdf/www/test/
Upload Files
File: D:/HostingSpaces/SBogers10/topswtw.komma.pro/vendor/dompdf/dompdf/www/test/css_nth_child.html
<!DOCTYPE html>

<html>
<head>
<title>CSS Selector :nth-child</title>

<style type="text/css">

p {
  margin: 2px;
}

div {
  margin-bottom: 1em;
  border: 1px solid #ddd;
}

div div {
  margin: 0;
}

.nth-child-1 p:nth-child(1) strong,
.nth-child-3 p:nth-child(3) strong,
.nth-child-odd p:nth-child(odd) strong,
.nth-child-even p:nth-child(even) strong,
.nth-child-n p:nth-child(n) strong,
.nth-child-3n p:nth-child(3n) strong,
.nth-child-n2 p:nth-child(n+2) strong, /* won't work because of the split("+") */
.nth-child-2n1 p:nth-child(2n+1) strong, /* won't work because of the split("+") */
.nth-child-3nm2 p:nth-child(3n-2) strong {
  background-color: #99ff99;
}
</style>

</head>

<body>
  
<h3>nth-child(1)</h3>
<div class="nth-child-1">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(3)</h3>
<div class="nth-child-3">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(odd)</h3>
<div class="nth-child-odd">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(even)</h3>
<div class="nth-child-even">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(n)</h3>
<div class="nth-child-n">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(3n)</h3>
<div class="nth-child-3n">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(n+2)</h3>
<div class="nth-child-n2">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(2n+1)</h3>
<div class="nth-child-2n1">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

<h3>nth-child(3n-2)</h3>
<div class="nth-child-3nm2">
  <p><strong>1</strong></p>
  <p><strong>2</strong></p>
  <p><strong>3</strong></p>
  <p><strong>4</strong></p>
  <p><strong>5</strong></p>
</div>

</body>
</html>
@ Telegram