【CSS3学習】 :nth-child

前回の記事：　CSS3 セレクタについて

今回はn番目系の擬似クラスの中で、対象の要素が隣接している必要があるものについてまとめていきます。

<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>
</ul>

対象の要素が隣接している必要がある擬似クラス

:first-child

ある要素内で最初の子要素を指定

li:first-child {
    color: #ff6e9b;
    font-weight: bold;
}

:last-child

ある要素内で最後の子要素を指定

li:last-child {
    color: #ff6e9b;
    font-weight: bold;
}

:nth-child(n)

先頭からn番目の子要素を指定する

nth-child(odd) : 奇数番目を指定

li:nth-child(odd) {
color: #1b95e0;
font-weight: bold;
}

><img width="285" alt="odd.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/031921a0-db65-0735-225d-c78df792f01d.png">


#### **:nth-child(even)** : 偶数番目を指定
>```css
li:nth-child(even) {
    color: #1b95e0;
    font-weight: bold;
}

:nth-child(数式) :

####nth-child(2) : 2番目の子要素を指定

li:nth-child(2) {
color: #1b95e0;
font-weight: bold;
}

>><img width="288" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/ed445e93-4981-1221-90d7-a0eea09d1ba7.png">



>####**:nth-child(2n)** : 2の倍数の子要素を指定

>>```css
li:nth-child(2n) {
    color: #1b95e0;
    font-weight: bold;
}

####:nth-child(2n+1) : 1番目の子要素を指定し、その後２つおきに指定

li:nth-child(2n+1) {
color: #1b95e0;
font-weight: bold;
}

>><img width="286" alt="2n+1.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/92ceacca-7cff-cea0-3f11-b93a30ad63a8.png">


>####**:nth-child(2n+5)** : 5番目の子要素を指定し、その後２つおきに指定
>>```css
li:nth-child(2n+5) {
    color: #1b95e0;
    font-weight: bold;
}

####:nth-child(n+3) : 3番目以降の子要素を指定

li:nth-child(n+3) {
color: #1b95e0;
font-weight: bold;
}

>><img width="282" alt="n+3.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/061255a9-9a98-b28b-ccb4-b31f280b7083.png">


>####**:nth-child(-n+3)** : 3番目までの子要素を指定
>>```css
li:nth-child(-n+3) {
    color: #1b95e0;
    font-weight: bold;
}

####:nth-child(n+3):nth-child(-n+7) : 3~7番目を指定

li:nth-child(n+3):nth-child(-n+7) {
color: #1b95e0;
font-weight: bold;
}

>><img width="280" alt="n+3,-n+7.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/55296912-8e63-a15f-6da6-918677f52ff7.png">




## **:nth-last-child(n)**
後ろから数えて、n番目の子要素を指定
nth-childと同様に、nの部分には**odd**、**even**、**n+1などの数式**を指定できる。


#### **:nth-last-child(odd)** : 奇数番目の子要素を指定
>```css
li:nth-last-child(odd) {
    color: #ff6e9b;
    font-weight: bold;
}

:nth-last-child(even) : 偶数番目の子要素を指定

li:nth-last-child(even) {
color: #ff6e9b;
font-weight: bold;
}

><img width="285" alt="nth-last even.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/8d02822c-7536-40fc-cb21-97924f156775.png">


#### **:nth-last-child(3)** : 3番目の子要素を指定

>```css
li:nth-last-child(3) {
    color: #ff6e9b;
    font-weight: bold;
}

:nth-last-child(3n) : 3の倍数の子要素を指定

li:nth-last-child(3n) {
color: #ff6e9b;
font-weight: bold;
}

><img width="275" alt="nth-last 3n.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/4f907a26-8639-db9d-1026-9e8df4e037f8.png">



#### **:nth-last-child(3n+1)** : 1番目の子要素を指定し、その後3つおきに指定

>```css
li:nth-last-child(3n+1) {
    color: #ff6e9b;
    font-weight: bold;
}

:nth-last-child(n+4) : 4番目以降の子要素を指定

li:nth-last-child(n+4) {
color: #ff6e9b;
font-weight: bold;
}

><img width="281" alt="nth-last n+4.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/d53128e2-84cb-bd95-d543-33620c33b8cd.png">


#### **:nth-last-child(-n+4)** : 4番目までの子要素を指定

>```css
li:nth-last-child(-n+4) {
    color: #ff6e9b;
    font-weight: bold;
}

:only-child

ある要素内で子要素が唯一の場合に適用

<div class="item">
  <h1>サンプル</h1>
  <p>テキスト</p>
</div>

<div class="item">
  <p>テキスト</p>
</div>


<div class="item">
  <p>テキスト</p>
  <p>テキスト</p>
</div>

.item p:only-child {
    color: #e1a261;
    font-weight: bold;
}