【CSS3学習】 :nth-child

[前回の記事：　CSS3 セレクタについて](http://qiita.com/natsukan/items/c1656e2ea1c1ae65ffc9)

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

```html
<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**
ある要素内で最初の子要素を指定 

```css
li:first-child {
    color: #ff6e9b;
    font-weight: bold;
}
```
<img width="278" alt="first-child.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/50d20517-08a9-fc5c-2887-becfaabbbb83.png">


##**:last-child**
ある要素内で最後の子要素を指定 

```css
li:last-child {
    color: #ff6e9b;
    font-weight: bold;
}
```
<img width="281" alt="last-child.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/ff42d872-19c5-de29-791b-db9df89dac2c.png">



##**:nth-child(n)**
  先頭からn番目の子要素を指定する 
####**nth-child(odd)** : 奇数番目を指定

>```css
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;
}
```
><img width="277" alt="even.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/c8833f91-e728-0ff0-f9d0-843a3e43141d.png">



###**:nth-child(数式)** :
>####**nth-child(2)** : 2番目の子要素を指定
>>```css
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;
}
```
>><img width="283" alt="2n.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/ed725d18-a27a-40cc-4794-570c30071fa4.png">


>####**:nth-child(2n+1)** : 1番目の子要素を指定し、その後２つおきに指定
>>```css
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;
}
```
>><img width="278" alt="2n+5.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/f264f8a6-79fd-df25-31b5-460f481a17e7.png">


>####**:nth-child(n+3)** : 3番目以降の子要素を指定
>>```css
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;
}
```
>><img width="282" alt="-n+3.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/24389863-d326-4670-cb2b-bf12e79b240d.png">

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

>>```css
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;
}
```
><img width="284" alt="nth-last odd.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/e7529166-4564-8fe0-c5f9-789548dd7ab3.png">


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

>```css
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;
}
```
><img width="286" alt="nth-last n.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/99f8c660-92c9-430b-6f01-8b09bcadcb12.png">


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

>```css
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;
}
```
><img width="277" alt="nth-last 3n+1.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/113edd63-776d-cbac-e02f-c5d0ed917a50.png">


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

>```css
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;
}
```
><img width="282" alt="nth-last -n+.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/a3be14cf-d7a5-adbd-9204-c9fd10b0686a.png">


##**:only-child**
ある要素内で子要素が唯一の場合に適用

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

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


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

```

```css
.item p:only-child {
    color: #e1a261;
    font-weight: bold;
}
```
<img width="244" alt="only.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/ab3e4ed9-923e-ee2e-bade-8638697dc686.png">