how to select given element AND all its children simultaneously?

Question

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 ?

Exploration

CSS properties generally inherit. Are you sure that you need to apply the rule to the ancestors, too? – Symploce

Asterisk in CSS should be mostly avoided too. – Folkestone

Re: CSS property inheritance – most do not, unless you count font, color and some other properties. Margin, padding, backgrounds aren't inherited by default, only if specified explicitly. – Existence

Is this still the case in 2020? – Leach

Answer 1

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.

Serilda

Answer 2

As others have stated there is no native solution for this problem.

But in current year you can achieve this with CSS Nesting, a feature adapted from CSS pre-processors like LESS by Chrome and many other browsers. Look here to check which browsers support it.

You do it like this:

/* V1 */
#elemID {
    &, & * {
        /* Your style here */
    }
}

& is like a copy of the enclosing selector so with this you basically achieve the #elemID, #elemID * selector you've mentioned but only writing #elemID once.

If you plan to have many similar selectors you can make the code slightly more compact like this:

/* V2 */
#elemID { &, & * {
    /* Your style here */
}}

I do not recommend it for production or any publicly published code but if you have a modern browser it is great for personal purposes i.e. applying your custom styles to various websites.

---

As mentioned in the comments the formula can be even simpler/shorter:

/* V3 */
#elemID {
    &, * {
        /* Your style here */
    }
}

/* V4 */
#elemID {
    *, & {
        /* Your style here */
    }
}

/* V5 */
#elemID { &, * {
    /* Your style here */
}}

/* V6 */
#elemID { *, & {
    /* Your style here */
}}

All 6 versions mentioned here are equivalent, but I personally would prefer V3 or V5 over others.

Tartlet

Could you explain please, are these codes equivalent? 1. #elemID { &, & * { ... 2. #elemID { &, * { ... Thank you – Chirography

Yes, you're right. Those two are equivalent. I've just tested it in Chrome 124 and it works, and it makes sense because parent selector & is only necessary before tag name selectors like span or div. I'll update the answer to include this information. – Tartlet

Do you mean that 1. #elemID { &, & span { ... 2. #elemID { &, span { ... are not equivalent? – Chirography

Huh... So it turns out that it's useful to have up to date information. I was referring to the way it worked in original spec (the pre-August 2023 one). I didn't know that the spec was updated. In the updated spec your two pieces of code are equivalent. You can read more about it in the docs (as I have just did myself). – Tartlet

Answer 3

No. But you could select its parent if an equivalent selector exists:

.parent * { ... }

Cardioid

That does not select the parent. – Serilda

I did say if the parent has an equivalent selector. If there were a uniquely identifiable parent, then you could select that parent as the base of the selector and use the asterisk. – Existence