html - How can I make it so the first element in a DIV has a different CSS to others?

Question

I have the following LESS code:

.modal-input-row {
        padding-bottom: 1rem;
        padding-top: 1rem;
        overflow: hidden;
        display: block;

        div {
            float: left;
            width: 50%;

            input {
                box-sizing: border-box;
                margin-bottom: 0.1rem;
                width: 75%;
            }

        }
    }

How can I make it so that the first modal-input-row inside an outer container does not have a padding at the top?

Answer 1

Use :first-child pseudoclass

.outercontainer .modal-input-row {
    padding-bottom: 1rem;
    padding-top: 1rem;
    overflow: hidden;
    display: block;

    &:first-child {
       padding-top: 0;
    }

    ...

}