Grow your CSS skills. Land your dream job.

Universal

Last updated on:

The Universal Selector is the * in CSS. Literally the asterisk character. It is essentially a type selector that matches any type. Type meaning an HTML tag like <div>, <body>, <button>, or literally any of the others.

A common use is in the universal reset, like this:

* {
  margin: 0;
  padding: 0;
}

There are times when using the universal selector is implied. For instance:

*.module {  }

is exactly the same as:

.module {  }

And in fact, the specificity of those is exactly the same, as the universal selector hold no specificity value at all.

The universal selector also is used with "universal namespaces". It's a bit weird, so I'll just let this simple demo speak for itself.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any Any Any Any

Comments

  1. manojhl123
    Permalink to comment#

    In wordpress TwentyThirteen theme i found this styling

    [class*="content"]:before

    It is used to clear the float
    but i don’t understand this type of styling does any one know how it works.

    what’s that [ ] signifies plz expalin the syntax

    • Matt
      Permalink to comment#

      I think it’s pointing to any element with a class that begins with (*=) the word “content.”

    • Dinu
      Permalink to comment#

      I think it’s pointing to any element with a class name that contains the word “content”, like content-wrap

  2. Permalink to comment#

    > rmniytrlykkleryklklernyl

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".