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

Asked

Viewed 3,524 times

21

Sometimes I take sites ready to edit and realize that the console appears:

* {
  /* código aqui */
}

What does that asterisk mean?

css
  • 5

    universal selector

  • Could you explain what it’s for?

  • Related: https://answall.com/questions/113970/por-que-em-opera%C3%A7%C3%B5es-de-reset-de-css-n%C3%A3o-%C3%A9-recommended-use-the-asterisk

  • 1

    I was wrong @Lucascarvalho! + 1 good question, I thought I already had question on the subject here :). This is often used to reset initial browser settings. Read What is User Agent Stylesheets?

  • Put... Flirt. Just search "css asterisk" that comes up 1 million articles explaining this...

  • 5

    Do you need to negative Leon? I asked here because I like the community, and I didn’t see any related questions. In addition to helping me, it helps stackoverflow, with SEO, Google, etc. Many other people don’t know that. If you don’t want to help, don’t bother, I’ve already been helped, and now I know what it is.

  • @Lucascarvalho I’m sorry, but in general, questions asked without any previous research are negative. You were lucky in this case.

  • Leon, you earn something in your life by negatively asking a relatively good question?

  • @Lucascarvalho Here is no place for this type of discussion. But here is the tip, the first topic: How to ask a good question? I didn’t consider it a good question because you clearly didn’t try to research.

  • 4

    @Leonfreire mistaken his comment. Read this article no meta. Questions that add content to the site will always be welcome.

  • @Wallacemaxters So the article I sent from SOPT is wrong? If so, it should be edited, right? I made the criticism based on previous experiences and the sending of this same article by comments.

  • 4

    @Leonfreire with forgiveness, but the "searched thoroughly" refers to seeking within the site (if you click on the link there you will notice that it goes to the search engine of the site itself), had no specific question on the subject, I mean has even an answer my https://answall.com/a/58005/3635, but it is not much about *, is about the behavior of .classe, adding "canonical content" in Portuguese is fundamental to make our site a more reliable source of research.

  • @Guilhermenascimento Ok. I still think the article should be edited to make it clearer. This is not obvious and as I said, it has been used before. All I said here was from experience.

  • @Leonfreire is not obvious to you, you understand? All the people who saw it, liked it, and even the ones who didn’t, didn’t have to deny the question, you know? Think to me: If the question is nice to other people and adds something to these people, what my intention is to negatively the same, since she is not harming me?

  • 1

    @Leonfreire understand, but keep in mind, that who defines what is good for the community is the community (users), these texts were brought from a pattern, if you want a place to state what the community finds useful and good this place is the Meta, read, follow, participate, have many questions and answers in [meta-tag:behavior] that can be useful to you. I still understand your attitude as good will and I am not scolding you, within the understanding you have done correctly. ;)

  • 2

    @Lucascarvalho he did not do in bad faith, and already understood, recommend you also read the meta, mainly about the meaning of down-votes, of course it has downvote misused, but within Leon’s understanding, it was not in bad faith, as I said, now is to be patient and expect people to absorb what is our community ;)

  • Thank you!! @Guilhermenascimento

  • @Guilhermenascimento Entendido. My vote was withdrawn.

Show 13 more comments

1 answer

29


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

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

* { box-sizing: border-box; }

Of course it’s due be careful when using the asterisk, 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 children of others.

Example:

p * {
   padding: 10px;
}

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

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.