CSS selectors: multiple classes descended from an ancestor

Question

Is there a better way than this to select the elements with classes options OR inputs that are descendants of #height without selecting any elements with those classes that are not descendants of #height?

#height .inputs, #height .options

The #height seems redundant but #height .inputs,.options selects all the class="options" on the page, not just those descended from #height.

score 3 · Accepted Answer · answered Apr 01 '13 at 03:25

Nope, that's just how CSS is designed, and it's one of the reasons I use LESS CSS on all of my projects now. With LESS, you can structure your CSS more like JavaScript by nesting selectors. For example:

#height {
    .inputs, .options {
        /* properties */
    }
}

score 2 · Answer 2 · answered Apr 01 '13 at 04:50

2

metadept is absolutely correct. The comma is separating your selectors, and since you aren't specifying that you want the .options that are children of #height, it will target every element with the class .options on the page.

LESS CSS is a great tool to use; you may also want consider SASS - it just boils down to what you're more comfortable with.

answered Apr 01 '13 at 04:50

The main reason I recommend LESS over SASS (aside from my familiarity with LESS) is that the client-side compilation makes development a lot easier. In production environments they're both well-supported and it probably depends on which is better supported by other third-party frameworks and plugins you're using. – metadept Apr 01 '13 at 05:07
1

Yup. Personally, I prefer using LESS as well - I just felt the need to let him know about SASS too :) – Apr 01 '13 at 05:43
1

Thanks guys. I've looked at LESS, just haven't started down that road yet. I am quite new to css and web development in general, so I want to make sure I start with a solid understanding of the underpinnings before moving on to libraries and other higher-level tools: CSS before LESS, JavaScript before JQuery, etc. Thanks again. – burgerB Apr 01 '13 at 13:33
@burgerB I agree with that except for the JavaScript before jQuery part. Personally I found it a lot easier to learn by starting out with jQuery since the base JavaScript element selection and manipulation is so obtuse. – metadept Apr 01 '13 at 14:37

CSS selectors: multiple classes descended from an ancestor

2 Answers2