CODEWITHSUNDEEP
csscss-selectors
rsk82
rsk82

Reputation: 29377

How to select multiple elements that are children of given element?

I have <div id='mydiv'> and I need to select all pre and div elements that are children of #mydiv.

I could do it this way:

div#mydiv > pre, div#mydiv > div

but, can it be done so that #mydiv is referenced only once?

div#mydiv > pre, div

will select all divs on the page regardless if they're children of #mydiv, so the comma isn't a way to do it. Maybe there's another kind of syntax I don't know about?

Upvotes: 71

Views: 73295

Answers (4)

Issam Mejdoubi
Issam Mejdoubi

Reputation: 339

You can actually group selectors with :is().

So in your case you would use it like this:

div#mydiv > :is(pre, div) {
     // CSS
}

Here is the documentation https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Upvotes: 34

East of Nowhere
East of Nowhere

Reputation: 1396

The only way to reference the id only once is to use it with the * selector:

#mydiv > * {

which will apply to all elements that are children of that div.

Depending on what styles you plan to apply this might be workable (I typically use this to zero-out margins, padding and border styles), but it's still probably best to do it the first way because it makes it easier to make exceptions/changes later down the road.

Upvotes: 7

Jawad
Jawad

Reputation: 6672

As far as I know, there is no shorthand for selector grouping.

See "Selector Grouping".

Although, with LESS, it is possible in the "Nested Rules" section.

Upvotes: 9

Fosco
Fosco

Reputation: 38506

You'll have to reference #mydiv twice... 

#mydiv > pre, #mydiv > div

I removed the extraneous div element selector as the ID is specific enough.

Upvotes: 69

Related Questions