first-childはスタイルが適用されるが、last-childではスタイルがうまくつかない。

Question

last-childが効かない。

<form action="" class="contact-form">
                    <ul>
                         <li class="input">
                                <input type="text" placeholder="姓">
                        </li >
                        <li class="input">
                                <input type="text" placeholder="名">
                        </li>
                        <li class="input">
                                 <input type="text" placeholder="メールアドレス">
                        </li>
                        <li class="textarea">
                                <textarea name="" id="" cols="30" rows="10" placeholder="質問">　　　　　　　　　　　　　　　　</textarea>
                        </li>
                        <li>
                            <input type="submit" class="submit">
                        </li>
                    </ul>
                </form>

 .contact-form{

        input{
            height: 55px;
        }
        textarea{
            height: 100px;
        }

        input,textarea{
            width:100%; 
        }
  
       .input {
           margin-top: 22px;
       }
       .input:first-child{
           margin-top:  0px;

       }
    
       
       
       .textarea{
           margin-top: 46px;
           margin-bottom: 40px;
       }
       .submit{
           background-color: #DA6B64;
           border-radius: 50px;
           font-size: 20px;
           color:#fff;
       }


    }

上記のように記載したときは

1番上の.inputのマージンがなくなり、ほかの.inputクラスはマージンに２２PXが適用され、
希望通り動いています。
しかし

.input{
margin-bottom:22px;
}

 .input:last-child{
           margin-bottom:  0px;
       }

　と書いた場合、
inputクラスすべてのマージンが０になってしまいます。
（本当は最後のinputクラスのみマージンが０で他はマージンボトムがついてほしいのです）

これはなぜでしょうか？
疑問に思ったので質問させてもらいました。

Answer 1

:last-childは「兄弟要素の中で最後」というセレクタであって、「特定クラスの兄弟要素の中の最後」ではありません。.input:last-childは「兄弟要素の中で最後の要素にinputというクラスが付いている」場合に適用されます。

【:last-child - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:last-child

兄弟要素のグループの中で最後の要素を表します。

Comments

[akaoni]

よく分かりました。ありがとうございます。