What does the asterisk in "* {}" mean in CSS?

19

Sometimes I get sites ready to edit and I notice that in the console it appears:

* {
  /* código aqui */
}

What does this asterisk mean?

    
asked by anonymous 02.06.2017 / 14:08

1 answer

27

* is called universal selector . This selector represents all elements that will be affected by the style definitions placed there.

For example, I usually use a lot to be able to apply a certain stylization to all elements of the page:

* { box-sizing: border-box; }

Of course, it should be be careful when using the asterisk, so as not to affect default settings of some elements.

Note that in the specific case of your question, the asterisk alone affects all elements, but it is possible to affect only all elements that are the child of others.

Example:

p * {
   padding: 10px;
}

That is, everything within <p> , will have the padding of 10px.

In addition, you can make several other combinations with the * selector, but in short, it will always represent "all elements".

    
02.06.2017 / 14:10