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

问题

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?

回答1:

Use :first-child pseudoclass

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

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

    ...

}

回答2:

Use the :first-child pseudo-selector:

input {
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    width: 75%;
    &:first-child {
        padding-top: 0;
    }
}

However, if you want the input within your first .modal-input-row to have no top padding:

.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%;
        }

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

来源：https://stackoverflow.com/questions/22064704/how-can-i-make-it-so-the-first-element-in-a-div-has-a-different-css-to-others