What does a start(*) in CSS mean

Question

I know that a * prefix before a style name like *border-top-width:0; is a hack for IE browsers. However, I am unable to understand this. When * is used as suffix as shown below what does it mean ??

.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}

I observed that when star mark is present, the style is getting applied in chrome browser and when star mark is removed , the styles are not getting applied in chrome browser.

`.ancestors *` which will select all items inside the `.ancestors` — Pranav C Balan, Feb 21 '14 at 04:55
possible duplicate of [What does "\*" mean in CSS?](http://stackoverflow.com/questions/8715860/what-does-mean-in-css) — Alex Wayne, Feb 21 '14 at 04:59
@AlexWayne:- This is not a duplicate as in the previous questions * was used as a prefix. OP is asking about the relevance of star as suffix! :) — Rahul Tripathi, Feb 21 '14 at 05:05

JosephGarrone · Accepted Answer · 2014-05-01T22:15:34.493

The * (Asterisk) symbol in a CSS file, when used after a class name, or any other identifier, will select all descendants/children inside that element.

For example, if we have this HTML document:

<div class="container">
    <div class="square">
    <div class="square">
</div>
<div class="container">
    <div class="circle">
    <div class="circle">
</div>

To select just the .container divs, the following CSS can be used:

.container
{
   /*Styling*/
}

To select just the .square inside the .containers then use:

.container .square
{
    /*Styling for squares*/
}

To select all the elements that are inside the .containers then use:

.container *
{
    /*Styling for squares, circles, rectangles and everything else you can think off*/
}

For further information, see the W3C reference on the Universal Selector:

http://www.w3.org/TR/selectors/#universal-selector

And also the Mozilla Dev Network:

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

@Pilot, no. Specifying a className will only select that element. — JosephGarrone, Feb 21 '14 at 05:01

score 1 · Answer 2 · answered Feb 21 '14 at 04:59

1

When star(*) is placed after the a class name it will select all its children.

From MDN:

An Asterisk (*) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect. For instance, *.warning and .warning are considered equal.

answered Feb 21 '14 at 04:59

Rahul Tripathi

161,154
30
262
319

Dear @Rahul wont just specifying a className select all child elements? – Deepak Ingole Feb 21 '14 at 04:59
@Pilot:- No that would not it would only select only that element. That is why it is written in Note in MDN:- `Note: Use the universal selector very carefully, as it is the most expensive CSS selector in terms of webpage performance.` – Rahul Tripathi Feb 21 '14 at 05:01
1

Thanks you master..+1 – Deepak Ingole Feb 21 '14 at 05:09

score 1 · Answer 3 · answered Feb 21 '14 at 04:59

1

Like in many other places, the asterisk is a wildcard that selects every element. When used after a class name (like in your example), every element that is a descendent of the ancestor class will have the styles applied.

answered Feb 21 '14 at 04:59

Josh Liptzin

726
4
12

What does a start(*) in CSS mean

3 Answers3