カンタンなcssの擬似要素＋組み合わせ

#cssの擬似要素について
どうも、よわよわエンジニアです。
今回はcssの擬似要素についてさらっとまとめます。

##サンプルコード
```sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="sample.css">#cssファイルの読み込み
  <title>CSSの擬似要素</title>
</head>
<body>
  <div class="oya">
    <p class="child">ひとりめ</p>
    <p class="child">ふたりめ</p>
    <p class="child">さんにんめ</p>
  </div>
</body>
</html>
```

```sample.css
.oya{
  width: 100%;
  font-size: 16px;
}
```
実行結果
<img width="540" alt="スクリーンショット 2019-12-13 20.30.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/e4cb3c69-bf8c-72cb-46d3-8a2d61d2d412.png">

##擬似要素とは？
擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。
HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。

##:first-child,:last-child擬似要素

例えば上記の例を参考に**「ひとりめ」だけ文字色を赤くしたい**場合。
擬似要素を使わずに書くと、

```sample.html
  <div class="oya">
    <p class="child1">ひとりめ</p>#クラス名を変更している
    <p class="child">ふたりめ</p>
    <p class="child">さんにんめ</p>
  </div>
```
```sample.css
.oya{
  width: 100%;
  font-size: 16px;
}

.child1{
  color: red;
}
```
実行結果
<img width="689" alt="スクリーンショット 2019-12-13 20.34.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/512a0de2-1cb0-bf81-0164-36fc4a2f39c2.png">

このように、クラス名を変更しなければいけません。
今はこれでもいいですが、今後マークアップをしていく中で、クラス名をいちいち変更して管理するのが大変になってきます。
**そこで登場するのが擬似要素です。**

今回の例では`:first-child`擬似要素がつかえそうです。
`:first-child`はその要素群の最初の１つを選択し、変更することができます。

```sample.css
.oya{
  width: 100%;
  font-size: 16px;
}

.child:first-child{
  color: red;
}
```
このようにしてみましょう。
これは`.child`の１つ目の要素を赤色に変えるという記述です。
そのため、先ほどの実行結果と同じになります。

この反対で、**一番最後の要素だけを変更する:last-childというものもあります**

```sample.html
  <div class="oya">
    <p class="child">ひとりめ</p> <----これがfirst-child
    <p class="child">ふたりめ</p>
    <p class="child">さんにんめ</p>  <----これがlast-child
  </div>
```
```sample.css
.oya{
  width: 100%;
  font-size: 16px;
}

.child:first-child{
  color: red;
  font-size: 20px;
}

.child:last-child{
  color: green;
  font-size: 30px;
  border-bottom: 1px solid green;
}
```
実行結果
<img width="743" alt="スクリーンショット 2019-12-13 20.48.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/7b0189c0-88c4-4e35-8ed2-4b9df7d45df1.png">

class名は全て`.child`ですが、
擬似要素で

「ひとりめ」=first-child　が赤色の20pxの大きさに、

「さんにんめ」=last-child　が緑色の30pxの下線付きになりました。

##:before,:after擬似要素

次に、`:before`と`:after`です。
これは簡単に言うと、その要素の直前、直後に何かを付与するというものです。

先ほどのサンプルコードに追記して確認していきます。

```sample.css
.oya{
  width: 100%;
  font-size: 16px;
}

.child:first-child{
  color: red;
  font-size: 20px;
}

.child:last-child{
  color: green;
  font-size: 30px;
  border-bottom: 1px solid green;
}

.child:before{  <----これを追加
  content: "私は";
  color: black;
  font-size: 12px;
}
```
実行結果
<img width="631" alt="スクリーンショット 2019-12-13 20.59.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/dff5d9b5-4fb7-5b02-a571-14aa07365e0e.png">
一気に文字が増えましたね。
これは、追加した`.child:before`により、
`.child`の直前に`"私は"`という文字を黒色12pxで表示させています。
`:after`はその逆で、要素の直後に付け足すことができます。

```sample.css
.child:after{
  content: "だよー";
  color: black;
  font-size: 12px;
}
```
を追記すると、`.child`クラスの直後に`"だよー"`がつくので
<img width="518" alt="スクリーンショット 2019-12-13 21.05.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/335d1c88-8915-e485-0967-72fdc56af6fa.png">
こうなります。

では、「さんにんめ」が関西人だったらどうしましょう。

##擬似要素の組み合わせ

<img width="462" alt="スクリーンショット 2019-12-13 21.08.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/61ba4414-8659-f5e4-a978-457b21b01024.png">

擬似要素をつかって、こうしたい場合
`.child`の`last-child`をどうにかしたいが、、、、

実はこの擬似要素、**組み合わせて使うことができます！**

```sample.css
.child:last-child:before{
  content: "ワイは";
  color: black;
  font-size: 12px;
}
.child:last-child:after{
  content: "やでー！";
  color: black;
  font-size: 12px;
}
```

`.child`の`last-child`の`:before`に
`"ワイは"`とつけてやり、
`.child`の`last-child`の`:after`に
`"やでー！"`とつけてやると、上記のような実行結果になります。


##おしまい
とても簡単なコードで、４つの擬似要素を説明しました。
実際にこのように使うことは少ないですが、各擬似要素の使い方をマスターできれば、
マークアップの幅がぐんと広がります。

ぜひ活用してください。