Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 565
rsk82 Avatar asked May 31 '11 19:05

rsk82


People also ask

Which is the correct way to select child elements?

To create a CSS child selector, you use two selectors. The child combinator selects elements that match the second selector and are the direct children of the first selector. Operators make it easier to find elements that you want to style with CSS properties.

How do you select children of elements in CSS?

The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.

How do you select multiple elements?

While pressing Ctrl, click each of the elements. NoteIf you are selecting multiple elements and need to use the Tab key to select an element in close proximity to others, do not hold the Ctrl key while pressing Tab.


2 Answers

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

#mydiv > pre, #mydiv > div 

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

like image 199
Fosco Avatar answered Sep 26 '22 00:09

Fosco


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.

like image 34
Jawad Avatar answered Sep 25 '22 00:09

Jawad