What's the shortest way to use CSS multiple combinators?

Question

I want to style all the input and select from inside a certain div in a certain manner. I know I can do (1)

#divNew select {
    display:table-cell;
    margin-left:1em;
}
#divNew input {
    display:table-cell;
    margin-left:1em;
}

and I can also do (2)

#divNew select,#divNew input {
    display:table-cell;
    margin-left:1em;
}

and I know I can't do (3)

#divNew select,input {
    display:table-cell;
    margin-left:1em;
}

because (3) applies this style to all input, inside and outside divNew.

My question is: is this all that is to it? I prefer the shorter option (2), but I feel that the redundant #divNew should be eliminated. Can it become even shorter than (2)?

why 2 is ugly? if you are looking just from the point of readability, why not use css preprocessors? — karthick
– karthick, Commented Sep 5, 2019 at 0:30
Option 2 is more common over option 1, though typically with each element on its own line (i.e. a hard return after each comma - though this is convention rather than a standard). Though if you want to find more elegant and maintainable stylesheets, maybe try looking into sass — Oliver
– Oliver, Commented Sep 5, 2019 at 0:30
@karthick Because it adds a redundant #divNew. And I'm not into so big projects as to need another layer of complexity. — Rodrigo
– Rodrigo, Commented Sep 5, 2019 at 2:19
@NagaSaiA That's just a simple question about a trivial css structure (that I couldn't find, though, for the lack of the right keywords). Can't you just abstract the html? Even because the question has already been answered. — Rodrigo
– Rodrigo, Commented Sep 5, 2019 at 2:23

bishop · Accepted Answer · 2019-09-05 04:56:10Z

2

Your option #2 is the proper way to share declarations amongst a group of selectors. Container nesting like your #3 is not supported, but something similar has been proposed to the W3C.

You might find CSS preprocessing tools like sass or less helpful to reduce the boilerplate, at the cost of adding a step to your build pipeline. Though most frontend frameworks nowadays already include a CSS preprocessor like these natively.

edited Sep 5, 2019 at 4:56

answered Sep 5, 2019 at 0:34

bishop

39.8k14 gold badges116 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Temani Afif Over a year ago

the proposal is accepted and there is already a first draft: drafts.csswg.org/css-nesting-1

BoltClock Over a year ago

But it's nothing like #3 though. What's closer to #3 is the :is() pseudo. That also appeared in its original form years ago. And it's still not available cross-browser yet.

bishop Over a year ago

@BoltClock I forgot about :is(), which is a great answer and should probably be accepted.

Collectives™ on Stack Overflow

What's the shortest way to use CSS multiple combinators?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related