Search code examples
csscss-selectors

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 ?

Solution

  • 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.