css - What does an asterisk before an equal sign mean (*=) ? What about the exclamation mark?

Question

I found these notations in a css :

.nav li ul li a [class*="icol-"] { opacity: 0.5; filter: alpha(opacity=50); padding-top: 4px; }

.secNav .chzn-container { width: 100%!important; max-width: 100%; }

What does the meaning of the * before the = sign ? Is it a comment when using the ! symbol ?

Answer 1

element[attribute*="includesthis"]

In other words:

<a class="someclassicol-hello">Click me and win a free monkey</a>

Is matched by

a[class*="icol-"]

If the string appears anywhere in the attribute, it's a match.

There is also ^= for begins with, and $= for ends with. Read more on this here.

---

!important forces rules to override each other, when they otherwise wouldn't.

a { color: red !important }
a.blue { color: blue }

<a class="blue">I'm actually red, because the less specific rule is !important</a>

Read more on that here. Especially this bit:

When Should !important Be Used?

As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.

NEVER

!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.