Question

I’ve been using Twitter’s Bootstrap package to build a site, and was browsing through the CSS when I came across the following (more or less, cruft redacted for clarity):

.btn-primary {
  background-color: #006dcc;
  *background-color: #0044cc;
}

Now, I’ve seen * used as part of the selector, both as part of a constructor like li li * { ... } and as part of an attribute selector a [name*=foo] (and obviously as part of CSS comments /* */), but I’ve never seen this before. Can anybody share any insight as to what it’s being used for? I’ve also seen it in the following (complete) context:

button.btn,
input[type="submit"].btn {
  *padding-top: 3px;
  *padding-bottom: 3px;
}

where the * is in front of two related but distinct properties. What’s going on?

Answer 1

This article should answer your question. It’s basically a way ‘hacking’ CSS selectors to target a certain browser.