<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.