CSS selector: what does an asterisk mean in the next two lines?

Question

.style1 * { vertical-align: middle; } 

. If I choose this, things with this style will no longer be vertically aligned.

Answer 1

This is a universal selector and will match any element. The selector you wrote will match any element that is a descendant of an element with class "style1".

Answer 2

* is a wildcard that selects something inside / under an element with class style1 on it.

Answer 3

As another said, this is a 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 | ---------------