【備忘録】CSSやSassで使われる擬似クラスその２

#はじめに
引き続き擬似クラスについて学習した内容を備忘録として残します。

#目次
-:focus 擬似クラス
-:lang（言語名） 擬似クラス
-:first-child 擬似クラス
- 参考サイト

#:focus 擬似クラス
:focus擬似クラスは、ユーザーの操作で要素が入力可能な状態になった時のスタイルを指定します。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<!-- input_nameにスタイルを適用 -->
<body>
    <form action="cgi-bin/abc.cgi" method="post">
        <p>Name<br><input type="text" name="name" size="30" id="input_name"></p>
        <p><input type="submit" value="Submit"></p>
    </form>
</body>

</html>
```

```css
/* :focus擬似クラス */
#input_name:focus {
    color: royalblue;
    background-color: pink;
}
```
入力欄をクリックし、フォーカス状態にすると背景がピンクになる。
![スクリーンショット 2021-02-09 15.15.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/9e28845a-87fb-7065-6ad8-8598a8d58f68.png)

#:lang(言語名） 擬似クラス
lang="ja"、lang="en"など、特定の言語を指定した要素に対してスタイルを適用します。

```html
<!-- input_nameにスタイルを適用 -->
<body>
    <div lang="ja" class="japanese">
        良くできました！
    </div>
    <div lang="en" class="english">![スクリーンショット 2021-02-09 15.26.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/2803254f-e40c-290b-eeb7-49e6da717098.png)

        Good Job!
    </div>
</body>
```

```css
/* :lang擬似クラス */

.japanese:lang(ja) {
    color: red;
    background-color: black;
}

.english:lang(en) {
    color: blue;
    background-color: yellow;
}
```
日本語(lang="ja")や英語(lang="en")の場合、それぞれ違うスタイルが適用された。
![スクリーンショット 2021-02-09 15.26.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/f10ed2c1-5ee8-3473-da9a-77680e785938.png)

#:first-child擬似クラス🌟
兄弟要素の中で最初に現れる子要素全てにスタイルを適用する。兄弟要素とは同じ階層の要素たちをいう。
こちらは概念の理解が難しいので要注意。同位の最初の兄弟の子全てであることがポイント。

>ケース①

```html
<!-- :first-child擬似クラスを適用 -->
<body>
    <div>
        外国語
        <p class="language">
            Hello
        </p>
        <p class="language">
            Nihao
        </p>
        <p class="language">
            こんにちは
        </p>
    </div>

    <div>
        外国語
        <p class="language">
            Hello
        </p>
    </div>
    <div>
        <p class="language">
            Nihao
        </p>
    </div>
    <div>
        <p class="language">
            こんにちは
        </p>
    </div>
</body>

```

```css
/* div要素に:first-child擬似クラスのスタイルを適用した場合*/

div:first-child {
    color: green;
    background-color: yellow;
}
```
同じ兄弟(同じ階層のdivタグたち）の中で一番最初のdivタグの子要素全てにステイルが適用される。
![スクリーンショット 2021-02-09 15.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/8f28e611-c41b-ff25-e474-0a3a2eeff92f.png)

>ケース②

```html
<!-- <div>要素の下位にpタグのlanguageクラス３つが同位の兄弟クラス。
その最初のlanguageクラスの子要素全て（Helloだけ）にスタイルが適用される -->
<body>
    <div>
        外国語
        <p class="language">
            Hello
        </p>
        <p class="language">
            Nihao
        </p>
        <p class="language">
            こんにちは
        </p>
    </div>
```

```html
<!-- <div>要素の下位に同位のlanguageクラスが３つ存在し兄弟関係にある。
一番最初のlanguageクラスが最初の兄弟クラスになる。その子要素Helloにスタイル適用 -->
<body>
    <div>
        外国語
        <p class="language">
            Hello
        </p>
        <p class="language">
            Nihao
        </p>
        <p class="language">
            こんにちは
        </p>
    </div>
<!-- それぞれの<div>要素の下位にpタグのlanguageクラスが存在。
それぞれ一つのlanguageクラスが最初の兄弟クラスになる。Hello,Nihao,こんにちはにスタイル適用される -->
 　 <div>
        外国語
        <p class="language">
            Hello
        </p>
    </div>
    <div>
        <p class="language">
            Nihao
        </p>
    </div>
    <div>
        <p class="language">
            こんにちは
        </p>
    </div>
</body>
```

```css
/* languageクラス要素に:first-child擬似クラスのスタイルを適用した場合*/

.language:first-child {
    color: white;
    background-color: black;
}　
```

![スクリーンショット 2021-02-09 15.57.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/e5b85ab9-ad8a-323d-00b5-8233f764b596.png)

# 参考サイト
- http://www.htmq.com/selector/first-child.shtml
- https://developer.mozilla.org/ja/docs/Web/CSS/:first-child