<h2>:nth-child(even|odd|n)</h2>
<p>Even</p>
<ul class="list-even">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
  <li class="list-item">List item 9</li>
  <li class="list-item">List item 10</li>
  <li class="list-item">List item 11</li>
  <li class="list-item">List item 12</li>
  <li class="list-item">List item 13</li>
  <li class="list-item">List item 14</li>
</ul>
<p>Odd</p>
<ul class="list-odd">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
  <li class="list-item">List item 9</li>
  <li class="list-item">List item 10</li>
  <li class="list-item">List item 11</li>
  <li class="list-item">List item 12</li>
  <li class="list-item">List item 13</li>
  <li class="list-item">List item 14</li>
</ul>
<h2>element + element</h2>
<section class="elplusel">
  <article>Article 1</article>
  <p>Paragraph 1</p> <!-- this will be selected -->
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p>
  <article>Article 4</article>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>
<h2>element ~ element</h2>
<section class="elpred">
  <p>Paragraph 1</p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this will be selected -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>Paragraph 3</p> <!-- this will be selected -->
</section>
<h2>[attribute^=value]</h2>
<ul class="list-starts-with">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="disabled-list-item">List item 3</li> <!-- this will be selected -->
  <li class="list-item">List item 4</li>
  <li class="list-item">List item 5</li>
  <li class="disabled-list-item">List item 6</li> <!-- this will be selected -->
  <li class="list-item">List item 7</li>
  <li class="disabled-list-item">List item 8</li> <!-- this will be selected -->
</ul>
<h2>[attribute$=value]</h2>
<ul class="list-ends-with">
  <li class="list-item">List item 1</li>
  <li class="list-item-disabled">List item 2</li> <!-- this will be selected -->
  <li class="list-item">List item 3</li>
  <li class="list-item">List item 4</li>
  <li class="list-item-disabled">List item 5</li> <!-- this will be selected -->
  <li class="list-item">List item 6</li>
  <li class="list-item">List item 7</li>
  <li class="list-item">List item 8</li>
</ul>
<h2>[attribute*=value]</h2>
<ul class="list-contains">
  <li class="list-item">List item 1</li>
  <li class="list-item">List item 2</li>
  <li class="list-item-disabled">List item 3</li> <!-- this will be selected -->
  <li class="list-item-disabled">List item 4</li> <!-- this will be selected -->
  <li class="list-item">List item 5</li>
  <li class="list-item-bold">List item 6</li>
</ul>
<h2>::first-line</h2>
<section class="first-line">
  <p>
    Paragraph 1 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 1 Second Line
  </p>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <div>Div 1</div>
  <p>Paragraph 2</p> <!-- this line will be highlighted -->
  <article>Article 4</article>
  <article>Article 5</article>
  <div>Div 2</div>
  <p>
    Paragraph 3 First Line <!-- this line will be highlighted -->
    <br>
    Paragraph 3 Second Line
  </p>
</section>
<h2>:in-range</h2>
<div>Type a number higher than 6 or lower than 13</div>
<input class="in-range" type="number" min="7" max="12" value="8" />
<h2>:out-of-range</h2>
<div>Type a number lower than 7 or higher than 12</div>
<input class="out-of-range" type="number" min="7" max="12" value="8" />
<h2>:target</h2>
<section>
  <a href="#v1">View 1 (click me)</a>
<a href="#v2">View 2 (click me)</a>
<br>
<p id="v1">View 1 Content</p>
<p id="v2">View 2 Content</p>
</section>

/* nth-child */

ul.list-even > li:nth-child(even) {
  color: orange;
}

/* or

ul.list-even > li:nth-child(2n) {
  color: orange;
}

*/

ul.list-odd > li:nth-child(odd) {
  color: orange;
}

/* or

ul.list-odd > li:nth-child(2n+1) {
  color: orange;
}

*/

/* el + el */
section.elplusel > article + p {
  color: orange;
}

/* el ~ el */
section.elpred > article ~ p {
  color: orange;
}

/* [attribute^=value] */
ul.list-starts-with > li[class^="disabled"] {
  color:orange
}

/* [attribute$=value] */
ul.list-ends-with > li[class$="disabled"] {
  color:orange
}

/* [attribute*=value] */
ul.list-contains > li[class*="disabled"] {
  color:orange
}

/* ::first-line */
section.first-line > p::first-line {
  color: orange
}

/* :in-range */
input.in-range:in-range {
  border: 2px solid green
}

/* :in-range */
input.out-of-range:out-of-range {
  border: 2px solid red
}

/* :target */
:target {
  color: #fff;
  font-weight: bold;
  background-color: orange
}