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         


        

Answer 1

! is part of !important; it is not a comment. The !important forces a rule to always be applied. It's typically used to override or to prevent your style from being overridden.

The *= means "contains". So in the example, the first line is looking for all children of .nav li ul li a elements with classnames that contain "icol-".

Answer 2

From the W3 recommendation:

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

So, in your case, it will match any element that has icol- in their class attribute (child of .nav li ul li a).

Answer 3

Not to be confused with ~ which matches only with white space around it.

---

[class*="foo"] /* 'fooA bar' */

will match classes containing foo (with or without space around it)

[class~="foo"] /* 'foo bar' */

will match classes containing foo only with space around it

---

There is also:

[class^="foo"] // begins with foo ('fooABC')
[class$="foo"] // ends with foo ('ABCfoo')
[class|="foo"] // begins with foo and is separated by a dash ('foo-bar')

More details here: Complex Selectors

Answer 4

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.

Answer 5

*= is an attribute selector, see CSS3 specification

!important means, that the rule is deemed as important by the author of the style and should not be overridden, see e.g. CSS2 for in-depth explanation.