Skip to content

Instantly share code, notes, and snippets.

@Shaz3e
Last active December 31, 2015 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Shaz3e/8004250 to your computer and use it in GitHub Desktop.
Save Shaz3e/8004250 to your computer and use it in GitHub Desktop.
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! In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to…
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;
h2{
color:white;
background:green;
display:inline-block;
padding:0.5em;
}
ul{
li{
list-style-type:none;
display:inline-block;
padding:0.5em;
margin:0.3em;
}// li
} // ul
}
.s3-container1{
ul{
li{
&:nth-child(5){
background: green;
color:white;
}
}// li
} // ul
} // s3-container1
.s3-container2{
ul{
li{
&:nth-child(n+6){
background: green;
color:white;
}
}// li
} // ul
} // s3-container2
.s3-container3{
ul{
li{
&:nth-child(-n+5){
background: green;
color:white;
}
}// li
} // ul
} // s3-container3
.s3-container4{
ul{
li{
&:nth-child(4n+1){
background: green;
color:white;
}
}// li
} // ul
} // s3-container4
.s3-container5{
ul{
li{
&:nth-child(odd){
background: green;
color:white;
}
}// li
} // ul
} // s3-container5
.s3-container6{
ul{
li{
&:nth-child(even){
background: green;
color:white;
}
}// li
} // ul
} // s3-container6
.s3-container7{
ul{
li{
&:first-child{
background: green;
color:white;
}
}// li
} // ul
} // s3-container7
.s3-container8{
ul{
li{
&:last-child{
background: green;
color:white;
}
}// li
} // ul
} // s3-container8
.s3-container9{
ul{
li{
&:nth-last-child(2){
background: green;
color:white;
}
}// li
} // ul
} // s3-container9
<link href='http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment