CODEWITHSUNDEEP
cssless
klewis
klewis

Reputation: 8379

How to use the plus sign process of css selectors in LESS?

Is there a more efficient way to write the following CSS in LESS format, or is this it?

li:first-child {
    border-right: solid 0.188em #da291c;
    padding: 0 2em 0 0;
}

li:first-child + li {
    padding: 0 0 0 2em;
}

li:first-child + li + li {
    padding: 0 2em 0 0;
    border-right: solid 0.188em #da291c;
    margin-left: 21%;
}

li:first-child + li + li + li {
    padding: 0 0 0 2em;
}

Upvotes: 2

Views: 1892

Answers (1)

Mike Jerred
Mike Jerred

Reputation: 10555

You can use & to refer to the parent selector:

li:first-child {
    border-right: solid 0.188em #da291c;
    padding: 0 2em 0 0;

    & + li {
        padding: 0 0 0 2em;

        & + li {
            padding: 0 2em 0 0;
            border-right: solid 0.188em #da291c;
            margin-left: 21%;

            & + li {
                padding: 0 0 0 2em;
            }
        }
    }
}

You could also use :nth-child, it might be more appropriate for what you are trying to do, but check browser support http://caniuse.com

Upvotes: 7

Related Questions