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 ?
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With