Useful :nth-child Recipes

I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Useful :nth-child Recipes</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
<h2>Useful :nth-child Recipes <small>with lESS</small></h2>
<div class="s3-containers s3-container1">
  <h2>Select Only the Fifth Element</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<div class="s3-containers s3-container2">
  <h2>Select All but the first five</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<div class="s3-containers s3-container3">
  <h2>Select Only First Five</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<div class="s3-containers s3-container4">
  <h2>Select Every Fourth, Starting At The First</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<div class="s3-containers s3-container5">
  <h2>Select Only Odd</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<div class="s3-containers s3-container6">
  <h2>Select Only Even</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

<div class="s3-containers s3-container7">
  <h2>Select Only First Child</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<div class="s3-containers s3-container8">
  <h2>Select Only Last Child</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<div class="s3-containers s3-container9">
  <h2>Select the Second to Last Element</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  font-family: 'Exo 2', sans-serif;
  text-align: center;
}
.s3-containers {
  display: inline-block;
  width: 100%;
  margin-bottom: 1em;
  text-align: center;
  border-bottom: solid 1px #ccc;
}
.s3-containers h2 {
  color: white;
  background: green;
  display: inline-block;
  padding: 0.5em;
}
.s3-containers ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0.5em;
  margin: 0.3em;
}
.s3-container1 ul li:nth-child(5) {
  background: green;
  color: white;
}
.s3-container2 ul li:nth-child(n+6) {
  background: green;
  color: white;
}
.s3-container3 ul li:nth-child(-n+5) {
  background: green;
  color: white;
}
.s3-container4 ul li:nth-child(4n+1) {
  background: green;
  color: white;
}
.s3-container5 ul li:nth-child(odd) {
  background: green;
  color: white;
}
.s3-container6 ul li:nth-child(even) {
  background: green;
  color: white;
}
.s3-container7 ul li:first-child {
  background: green;
  color: white;
}
.s3-container8 ul li:last-child {
  background: green;
  color: white;
}
.s3-container9 ul li:nth-last-child(2) {
  background: green;
  color: white;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Useful :nth-child Recipes ) is write by Shaz3e, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Shaz3e