Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to select given element AND all its children simultaneously?

ok I know how to do both these things separately:

#elemID {  } /* selects only one element */
#elemID * {  } /* selects all its children elements but not the element itself */

And I know I can do it like this:

#elemID, #elemID * { }

But is there a way to avoid this repeating ?

like image 834
rsk82 Avatar asked Jan 08 '12 21:01

rsk82


People also ask

How do you choose multiple children?

The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.

Which is the correct way to select child element?

The element > element selector selects those elements which are the children of the specific parent. The operand on the left side of > is the parent and the operand on the right is the children element. Example: Match all <p> element that are child of only <div> element.

How do you select child 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.


1 Answers

No, there is nothing shorter than that.

Note that if you really only want all the children of #elemID, and not all the descendants, you need to use the child combinator:

#elemID, #elemID > *

And as Šime Vidas has commented, some properties like color are automatically inherited by descendant elements by default. If you're trying to give text color to #elemID, you should not need to apply it explicitly and recursively to the elements inside it. See the SitePoint Reference on inheritance in CSS for details.

like image 103
BoltClock Avatar answered Oct 23 '22 02:10

BoltClock