【CSS3学習】:nth-of-type

[前回の記事　:　n番目系の擬似クラスで要素が隣接している必要があるもの](http://qiita.com/natsukan/items/f68e0e0e3b81096fe343#first-child)


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

```html
<div class="sample">
  <h2>擬似クラス</h2>
  <p>隣接していなくても指定OK</p>
  <ul>
    <li>:first-of-type</li>
    <li>:last-of-type</li>
    <li>:nth-of-type</li>
    <li>:nth-last-of-type</li>
    <li>:only-of-type</li>
  </ul>
  <p>その他</p>
  <ul>
    <li>:not()</li>
    <li>:empty</li>
  </ul>
　　　　<p>サンプル</p>
</div>
```


###**指定した要素が隣接していなくても指定できる擬似クラス**###

##**:first-of-type**
指定した要素の最初の要素を指定する

```css
.sample p:first-of-type {
    color: #ff6e9b;
}
```
<img width="222" alt="first-of-type.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/4c2585f6-85a8-0522-4a46-e6f16fb144fe.png">



##**:last-of-type**
間に別の要素が入っていても、指定した要素の最後の要素を指定する

```css
.sample p:last-of-type {
    color: #ffa969;
}
```

<img width="224" alt="last-of-type.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/2cf29f3b-860a-8045-7535-4022910740d1.png">



##**:nth-of-type( )**

間に別の要素が入っていても、指定した要素の○番目を指定する

```css
.sample p:nth-of-type(2) {
    color: #a8e174;
}
```

<img width="218" alt="nth-of-type.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/0a42ef1a-fe23-6eca-c815-34a82e3892d9.png">



##**:nth-last-of-type( )**

間に別の要素が入っていても、指定した要素の最後から数えて○番目を指定する

```css
.sample p:nth-last-of-type(3) {
    color: #b28fe1;
}
```

<img width="222" alt="nth-last-of-type.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/19c70b49-7016-a1f6-4719-85d273644901.png">



##**:only-of-type**
ある要素内の指定した要素が唯一の場合にスタイルが適用される

```html
<div class="sample">
  <h2>擬似クラス</h2>
  <p>隣接していなくても指定OK</p>
  <ul>
    <li>:first-of-type</li>
    <li>:last-of-type</li>
    <li>:nth-of-type</li>
    <li>:nth-last-of-type</li>
    <li>:only-of-type</li>
  </ul>
  <p>その他</p>
  <ul>
    <li>:not()</li>
    <li>:empty</li>
  </ul>
  <p>サンプル</p>
</div>

<div class="sample">
  <h3>擬似クラス</h3>
  <p>only-of-type</p>
</div>
```

```css
.sample p:only-of-type {
    color: #8294e1;
}
```

<img width="219" alt="only-of-type.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/9f748459-9039-70a4-133e-f5a393804305.png">


##**その他の擬似クラス**

##**:not()**
指定した要素以外の要素にスタイルを適用する

```html
<div class="sample">
  <h2>擬似クラス</h2>
  <p class="txt">隣接していなくても指定OK</p>
  <ul>
    <li>:first-of-type</li>
    <li>:last-of-type</li>
    <li>:nth-of-type</li>
    <li>:nth-last-of-type</li>
    <li>:only-of-type</li>
  </ul>
  <p>その他</p>
  <ul>
    <li>:not()</li>
    <li>:empty</li>
  </ul>
  <p class="txt">サンプル</p>
</div>
```

```css
.sample p:not(.txt) {
    color: #ff6e9b;
}
```

<img width="223" alt="not.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/8dd92b9b-887e-71b6-fd3a-6953abcd258c.png">


##**:empty**
要素の中身が空の要素を指定する


```html
<table>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td></td>
  </tr>
</table>
```

```css
table {
    border:1px solid #000000;
    border-collapse: collapse;
}

td {
    border:1px solid #000000;
    padding: 10px;
}

td:empty {
    background: #4ac9d5;
}
```

<img width="125" alt="empty.png" src="https://qiita-image-store.s3.amazonaws.com/0/174180/aacc61a4-c628-57a6-eadb-89b5ffa18730.png">