Home>

last-child doesn't work.

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

    }

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.
But

. 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】
    https://developer.mozilla.org/en/docs/Web/CSS/:last-child

      

    Represents the last element in a group of sibling elements.