Selector to combine Asterisk and parent element?

Question

I know that the Asterisk match all items inside an element. Is there any selector, that includes the parent element too?

Sample HTML

<p>
    foobar
    <span>
        foobar
    </span>
</p>

Sample CSS

p * {
    background-color:aqua;
}

Now only the span elements inside the p gets the background-color. Is there a selector which matches the p tag and all tags inside the p tag? Or do i still have to use

p, p * {
    background-color:aqua;
}

NOTE The background-color is only dummy content.

Maybe I missed something, but why not use simply the 'p' selector ? — Laurent S., May 07 '13 at 12:37
I think the `background-color` is somehwat confusing. It's only a dummy attribute to point out the problem. — Slevin, May 07 '13 at 12:41
Oh ok, my bad :-) So I think you'll have to stick with the 'p, p *' selector... — Laurent S., May 07 '13 at 12:42

BoltClock · Answer 1 · 2013-05-07T12:44:04.100

You will have to use p, p *, although depending on the property you're applying, if it is inherited by default it should be enough to simply apply it to p and have its descendants inherit it instead. If you explicitly apply it to all the descendants, you may break inheritance chains unnecessarily.

Considering the nature of a background, I don't see much of a point in applying a background color to all of the descendants of p along with the p itself.

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

Is there any selector, that includes the parent element too?

No. See Is there a CSS parent selector? for a more detailed explanation.

It has been suggested with css level 4, and rejected : Complex CSS selector for parent of active child

edited May 23 '17 at 11:49

Community

1
1

answered May 07 '13 at 12:40

Milche Patern

17,400
6
31
52

Selector to combine Asterisk and parent element?

2 Answers2