<section>
	<h1>:nth-child</h1>
	<h2>先頭から3番目を指定<span>ul li:nth-child(3)</span></h2>
	<ul class="nthc-list01">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>先頭から3の倍数を指定<span>ul li:nth-child(3n)</span></h2>
	<ul class="nthc-list02">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>先頭から3の倍数+1を指定<span>ul li:nth-child(3n+1)</span></h2>
	<ul class="nthc-list03">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>先頭から偶数を指定<span>ul li:nth-child(even)</span></h2>
	<ul class="nthc-list04">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>先頭から奇数を指定<span>ul li:nth-child(odd)</span></h2>
	<ul class="nthc-list05">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>先頭から3番目以降を指定<span>ul li:nth-child(n+3)</span></h2>
	<ul class="nthc-list06">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>先頭から3番目まで(3番目以前)を指定<span>ul li:nth-child(-n+3)</span></h2>
	<ul class="nthc-list07">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>先頭から3番目~先頭から6番目までを指定<span>ul li:nth-child(n+3):nth-child(-n+6)</span></h2>
	<ul class="nthc-list08">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>
</section>
<section>
	<h1>:nth-last-child</h1>
	<h2>最後から3番目を指定<span>ul li:nth-last-child(3)</span></h2>
	<ul class="nthlc-list01">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>最後から3の倍数を指定<span>ul li:nth-last-child(3n)</span></h2>
	<ul class="nthlc-list02">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>最後から3の倍数+1を指定<span>ul li:nth-last-child(3n+1)</span></h2>
	<ul class="nthlc-list03">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>最後から偶数を指定<span>ul li:nth-last-child(even)</span></h2>
	<ul class="nthlc-list04">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>最後から奇数を指定<span>ul li:nth-last-child(odd)</span></h2>
	<ul class="nthlc-list05">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>最後から3番目以降を指定<span>ul li:nth-last-child(n+3)</span></h2>
	<ul class="nthlc-list06">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>最後から3番目まで(3番目以前)を指定<span>ul li:nth-last-child(-n+3)</span></h2>
	<ul class="nthlc-list07">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>

	<h2>最後から3番目~最後から6番目までを指定<span>ul li:nth-last-child(n+3):nth-last-child(-n+6)</span></h2>
	<ul class="nthlc-list08">
		<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
	</ul>
</section>
section {
	flex: 1;
	padding: 0 40px 40px;
}
h1 {
	margin-bottom: -40px;
}
h2 {
	margin-top: 80px;
}
h2 span {
	display: block;
	margin-top: .5em;
	color: #888;
	font-size: 80%;
}
ul {
	margin: 20px 0 -10px -10px;
	padding: 0;
	list-style: none;
}
ul li {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-color: #3498db;
	margin: 0 0 10px 10px;
}
@media screen and (max-width: 800px) {
	section+section {
		margin-top: 40px;
		padding-top: 40px;
		border-top: 1px solid #aaa;
	}
}
@media screen and (min-width: 800px) {
	body {
		display: flex;
	}
}

.nthc-list01 li:nth-child(3) {
	background-color: #e74c3c;
}
.nthlc-list01 li:nth-last-child(3) {
	background-color: #e74c3c;
}

.nthc-list02 li:nth-child(3n) {
	background-color: #e74c3c;
}
.nthlc-list02 li:nth-last-child(3n) {
	background-color: #e74c3c;
}

.nthc-list03 li:nth-child(3n+1) {
	background-color: #e74c3c;
}
.nthlc-list03 li:nth-last-child(3n+1) {
	background-color: #e74c3c;
}

.nthc-list04 li:nth-child(even) {
	background-color: #e74c3c;
}
.nthlc-list04 li:nth-last-child(even) {
	background-color: #e74c3c;
}

.nthc-list05 li:nth-child(odd) {
	background-color: #e74c3c;
}
.nthlc-list05 li:nth-last-child(odd) {
	background-color: #e74c3c;
}

.nthc-list06 li:nth-child(n+3) {
	background-color: #e74c3c;
}
.nthlc-list06 li:nth-last-child(n+3) {
	background-color: #e74c3c;
}

.nthc-list07 li:nth-child(-n+3) {
	background-color: #e74c3c;
}
.nthlc-list07 li:nth-last-child(-n+3) {
	background-color: #e74c3c;
}

.nthc-list08 li:nth-child(n+3):nth-child(-n+6) {
	background-color: #e74c3c;
}
.nthlc-list08 li:nth-last-child(n+3):nth-last-child(-n+6) {
	background-color: #e74c3c;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.