Useful :nth-child Recipes

In this example below you will see how to do a Useful :nth-child Recipes with some HTML / CSS and Javascript

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!

Thumbnail
This awesome code was written by Shaz3e, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Shaz3e ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Useful :nth-child Recipes</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.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/Shaz3e/useful-nth-child-recipes-AaxnG */
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;
}

Comments