last-child doesn't work.

<form action = "">
                                <input type = "text" placeholder = "last name">
                                <input type = "text" placeholder = "name">
                                 <input type = "text" placeholder = "email address">
                                <textarea name = "" cols = "30" rows = "10" placeholder = "question"><strong></textarea>
                            <input type = "submit">
.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;


When described above

The top .input margin disappears, and the other .input class has 22PX applied to the margin.
It is moving as you wish.

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

The margin of all input classes will be 0.
(I really want the last input class to have a margin of 0 and others to have a margin bottom)

Why is this?
I was wondering so I asked it.

  • Answer # 1

    : last-childis a selector called "last among sibling elements", not "last among sibling elements of a particular class"..input: last-childis applied when "the last element has a class called input" among sibling elements.

    【: last-child-CSS: cascading style sheets | MDN】


    Represents the last element in a group of sibling elements.