cssで、last-childが効かない。

実現したいこと

問い合わせくださいフォームを作成しています。インプットやテキストエリアが並んでいるので、それら全部に共通のクラスを振りスタイルを適応し、そのlast-childだけには少し別のスタイルを後で適応したいです。

前提

以下のコードで、「contact__form__container__item」というクラス名のものすべてに一括でスタイルを適応し、その下でそのラストチャイルドだけ高さを変えたく思います。

発生している問題・エラーメッセージ

エラーも何も出ないのですが、ただただ反映されません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <title>Document</title>
8</head>
9<body>
10    <main class="contact">
11        <div class="contact__inner">
12            <form class="contact__form">
13                <div class="contact__form__container">
14                    <div class="contact__form__head">
15                        <h1 class="contact__form__text">問い合わせフォーム</h1>
16                    </div>
17                    <input type="text" name="name" placeholder="Name" class="contact__form__container__item"><br>
18                    <input type="email" name="email" placeholder="Email" class="contact__form__container__item"><br>
19                    <textarea type="text" name="message" placeholder="Message" class="contact__form__container__item"></textarea><br>
20                    <button id="submit" type="submit" class="send-btn">送信</button>
21                </div>
22            </form>
23        </div>
24    </main>
25    <!-- <script src="main.js"></script> -->
26</body>
27</html>

Scss
1
2.contact {
3    width: 100%;
4
5    &__form{
6
7        &__container {
8            text-align: center;
9
10            // ここで一括設定
11            &__item {
12                width: 300px;
13                height: 50px;
14                padding-left: 5px;
15                margin-bottom: 20px;
16
17                // ここで個別設定をしたいが、反映されない
18                &:last-child {
19                    height: 200px;
20                }
21            }
22        }
23
24        &__text {
25            text-align: center;
26
27        }
28    }
29    
30}

css
1.contact {
2  width: 100%;
3}
4.contact__form__container {
5  text-align: center;
6}
7.contact__form__container__item {
8  width: 300px;
9  height: 50px;
10  padding-left: 5px;
11  margin-bottom: 20px;
12}
13.contact__form__container__item:last-child {
14  height: 200px;
15}
16.contact__form__text {
17  text-align: center;
18}/*# sourceMappingURL=style.css.map */

試したこと

①nth-childを指定してみましたが無理でした。

②JavaScriptで「contact__form__container__item」というクラス名のものをすべてqueryselectorAllで取得し、その中の一番最後の要素のstyleのheightを変えることによってようやく実現できました。
が、あまりに面倒なので、cssだけで実現できないのかと困っています。

※ 最後の要素にまた独自にクラスを指定する、など他にも方法はあると思いますが、今回質問させていただいたのは、「なぜここではラストチャイルドが効かないのか」というのを知りたい意図もあります。そのあたりも教えていただければ幸いです。

どなたかよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答3件

:nth-last-child(...of...)でどうでしょうか。

css
1:nth-last-child(1 of .contact__form__container__item) {
2  height: 200px;
3}

Safari 以外は比較的最近リリースされた実装なので、対応ブラウザのバージョンには気を付けてください。

selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use... Support tables for HTML5, CSS3, etc

投稿2023/08/05 01:04

Lhankor_Mhy

総合スコア37421

last-childは文字どおり「末子」のことですが、「contact__form__container__itemというクラスを持つ最後のタグ」は、末子じゃなくて下から3番目です。

クラス名を指定しても、親子兄弟関係が変わるわけじゃないので、last-childの意味を「末子」から、「同一クラス名の中での最後」に変更するのは無理です。

①nth-childを指定してみましたが無理でした。

nth-childを使うなら、第6子なのでnth-child(6)で出来ると思います。
あるいは、nth-last-child(3)。
ただ、いずれにせよ「何番目」という指定はあまり現実的じゃないでしょう。

last-of-typeのように「同じタグ名の子要素の中で最後」を使おうとしても、対象タグがinputとtextareaと2種類あるので駄目ですね。

お書きのようにクラス名を追加するか、または、それ以外で他の要素と区別できる何か―ー今回だと、タグ名のtextareaかname属性―ーを使うか。

投稿2023/08/04 17:55

otn

総合スコア86295

ベストアンサー

:last-child の機能を誤解しているようです。セレクタ:last-child は「セレクタ」でマッチした要素がその親の最後の子要素のときだけマッチするように条件を追加します。「セレクタ」でマッチした最後の要素に限定するのではありません。

たとえば、質問文中の <textarea> は、その親 <div class="contact__form__container"> の最後の子要素ではないので :last-child にマッチすることはありません。もし <textarea> だけにマッチさせたいのなら、<br> と <button> を <div class="contact__form__container"> の外に出すなどして <textarea> が最後の子要素になる必要があります。

投稿2023/08/04 15:16