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

I have 开发者_Python百科<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?

---

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

#mydiv > pre, #mydiv > div

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

---

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

---

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.

---

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.