CSS: What this Asterisk (*) does?

Question

this line of code is for the navigation bar of Apple.com

#globalheader #globalnav[class*="nosearch"] { width:100%; }

Somebody know what that asterisk after class means there?

same as every where, a wild card, the joker. – Itay Moav -Malimovka Jan 22 '12 at 05:18 — Itay Moav -Malimovka, Jan 22 '12 at 05:18
http://stackoverflow.com/questions/5110249/wildcard-in-css – stephenmurdoch Jan 22 '12 at 05:20 — stephenmurdoch, Jan 22 '12 at 05:20
http://www.w3.org/TR/selectors/#attribute-substrings – mu is too short Jan 22 '12 at 05:24 — mu is too short, Jan 22 '12 at 05:24

score 29 · Accepted Answer · answered Jan 22 '12 at 05:25

29

#globalnav[class*="nosearch"]

means: class contains "nosearch"

#globalnav[class^="nosearch"]

means: class starts with "nosearch"

#globalnav[class$="nosearch"]

means: class ends with "nosearch"

answered Jan 22 '12 at 05:25

Aziz

1

`#globalnav[class*="nosearch"]` is the same as `#globalnav.nosearch`. Isn't it? – DanielBlazquez Aug 08 '13 at 18:26
2

@Dani: Nope. The first would include any class that has the string `nosearch` in its name, such as `boxnosearch` and `nosearchbutton`. The second would include only the class `nosearch` and nothing else. – Aziz Aug 13 '13 at 02:19

score 0 · Answer 2 · answered Nov 29 '16 at 20:27

0

* is very similar to ~ but ~ matches only with space around it.

E.g.

foo bar

but not

foo-bar

* will match both.

answered Nov 29 '16 at 20:27

Nelu

2 Answers2