CSS Selector: What does the asterisk mean in the following 2 lines

Question

.style1 * { vertical-align: middle; }

..If I take it out, things with this style are no longer vertically aligned.

Nick Craver · Accepted Answer · 2010-03-02 00:51:55Z

4

* is the wildcard selector, it's selecting anything within/under an element with the style1 class on it.

answered Mar 2, 2010 at 0:51

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zack The Human · Accepted Answer · 2010-03-02 00:53:08Z

It's the Universal Selector, and will match any element. The selector you have written will match any element which is a descendant of an element with the class "style1".

nickf · Accepted Answer · 2010-03-02 00:57:50Z

As the other said, it's the universal selector, selecting all descendant elements under .style1. To demonstrate:

Given this HTML:

<div class="style1"> <p>foo</p> <div>bar</div> </div>

And this CSS:

.style1 { border: 1px solid; } /* styles applied to the .style1 element */ --------------- | foo | | | | bar | --------------- .style1 * { border: 1px solid; } /* styles applied to descendants of .style1 */ --------------- | foo | +-------------+ | bar | ---------------

Collectives™ on Stack Overflow

CSS Selector: What does the asterisk mean in the following 2 lines

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related