CSSはこちら
h1 {
text-decoration: underline;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
/*:nth-child(3) の場合*/
ul.nc li:nth-child(3) {
color: #FF0004;
}
/*:nth-of-type(3) の場合*/
ul.not li:nth-of-type(3) {
color: #FF0004;
}
/*:nth-last-child(3) の場合*/
ul.nlc li:nth-last-child(3) {
color: #FF0004;
}
/*:nth-last-of-type(3) の場合*/
ul.nlot li:nth-last-of-type(3) {
color: #FF0004;
}
nth-child(3)の場合
要素の中で、数えて3つ目
-
- SPANタグでゼロこめ
- リストタグでひとつめ
- リストタグでふたつめ
- リストタグでみっつめ
- リストタグでよっつめ
- リストタグでいつつめ
- リストタグでむっつめ
- リストタグでななつめ
SPANタグでやっつめ
コードはこちら
<ul class="nc">
<span>SPANタグでゼロこめ</span>
<li>リストタグでひとつめ</li>
<li>リストタグでふたつめ</li>
<li>リストタグでみっつめ</li>
<li>リストタグでよっつめ</li>
<li>リストタグでいつつめ</li>
<li>リストタグでむっつめ</li>
<li>リストタグでななつめ</li>
<span>SPANタグでやっつめ</span>
</ul>
nth-of-type(3)の場合
兄弟要素＜li＞の中で、数えて3つ目
-
- SPANタグでゼロこめ
- リストタグでひとつめ
- リストタグでふたつめ
- リストタグでみっつめ
- リストタグでよっつめ
- リストタグでいつつめ
- リストタグでむっつめ
- リストタグでななつめ
SPANタグでやっつめ
コードはこちら
<ul class="not">
<span>SPANタグでゼロこめ</span>
<li>リストタグでひとつめ</li>
<li>リストタグでふたつめ</li>
<li>リストタグでみっつめ</li>
<li>リストタグでよっつめ</li>
<li>リストタグでいつつめ</li>
<li>リストタグでむっつめ</li>
<li>リストタグでななつめ</li>
<span>SPANタグでやっつめ</span>
</ul>
nth-last-child(3)の場合
後ろから数えて3つ目
-
- SPANタグでゼロこめ
- リストタグでひとつめ
- リストタグでふたつめ
- リストタグでみっつめ
- リストタグでよっつめ
- リストタグでいつつめ
- リストタグでむっつめ
- リストタグでななつめ
SPANタグでやっつめ
コードはこちら
<ul class="nlc">
<span>SPANタグでゼロこめ</span>
<li>リストタグでひとつめ</li>
<li>リストタグでふたつめ</li>
<li>リストタグでみっつめ</li>
<li>リストタグでよっつめ</li>
<li>リストタグでいつつめ</li>
<li>リストタグでむっつめ</li>
<li>リストタグでななつめ</li>
<span>SPANタグでやっつめ</span>
</ul>
nth-last-of-type(3)の場合
兄弟要素＜li＞の中で、後ろから数えて3つ目
-
- SPANタグでゼロこめ
- リストタグでひとつめ
- リストタグでふたつめ
- リストタグでみっつめ
- リストタグでよっつめ
- リストタグでいつつめ
- リストタグでむっつめ
- リストタグでななつめ
SPANタグでやっつめ
コードはこちら
<ul class="nlot">
<span>SPANタグでゼロこめ</span>
<li>リストタグでひとつめ</li>
<li>リストタグでふたつめ</li>
<li>リストタグでみっつめ</li>
<li>リストタグでよっつめ</li>
<li>リストタグでいつつめ</li>
<li>リストタグでむっつめ</li>
<li>リストタグでななつめ</li>
<span>SPANタグでやっつめ</span>
</ul>