CODEWITHSUNDEEP
css
Chad
Chad

Reputation: 24689

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

.style1  * {
   vertical-align: middle;
}

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

Upvotes: 4

Views: 684

Answers (3)

nickf
nickf

Reputation: 546085

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        |
---------------

Upvotes: 1

Zack The Human
Zack The Human

Reputation: 8481

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".

Upvotes: 3

Nick Craver
Nick Craver

Reputation: 630469

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

Upvotes: 4

Related Questions