CSS input[class*="span"]

Question

I noticed this css on a web page and wondered how it worked!

What does this mean? input[class*="span"]

input[class*="span"], select[class*="span"], textarea[class*="span"] {
    float: none;
    margin-left: 0;
}

[Multiple Attribute Values](http://css-tricks.com/multiple-attribute-values/) — Itay, Sep 25 '13 at 11:15
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors — Passerby, Sep 25 '13 at 11:16
possible duplicate of [wildcard \* in CSS for classes](http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes) — lurker, Sep 25 '13 at 11:17
`input[class*="span"]` refers to all input elements that contain the string 'span' in its class. e.g. `.span-demonium` — ashley, Sep 25 '13 at 11:18
The upvoted answers are correct in what it does, but the use of code like this looks like poor practice; I don't think the original author of this code really understands how to use classes. — Spudley, Sep 25 '13 at 12:14

score 5 · Accepted Answer · answered Sep 25 '13 at 11:28

What it means it will select any input which has a class which includes the string "span" ANYWHERE in the class name. Such as:

<input class="span" type="text" value="span" />

<input class="span-3" type="text" value="span-3" />

<input class="span-six" type="text" value="span-six" />

 <input class="myspan" type="text" value="myspan" />

Codepen EXample

score 3 · Answer 2 · answered Sep 25 '13 at 11:17

3

'*' is an attribute wildcard selector. That CSS selector looks for any element of those types that has a class that contains 'span' in the class name.

answered Sep 25 '13 at 11:17

guymid

1,186
8
11

score 0 · Answer 3 · answered Sep 25 '13 at 11:16

0

From w3schools.com:

Example:

a[src*="w3schools"]

Selects every element whose src attribute value contains the substring "w3schools"

http://www.w3schools.com/cssref/css_selectors.asp

But in your example it looks kind of useless. Since the select probably has a class of "span", you could select it with:

input.span, select.span, textarea.span {
    float: none;
    margin-left: 0;
}

Then again, calling your class after an HTML element, isn't exactly smart.. Could you post the HTML to which it is referring?

answered Sep 25 '13 at 11:16

Sander

223
6
17

@Naveen Well that's a useless comment.. Anyway, a better source would then be: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors – Sander Sep 25 '13 at 11:24
Indeed, the comment without any context is useless. But anyway, [please, don't link to or use w3schools. It *is* a horrible reference full of incorrect information that sometimes even leads to security holes.](http://w3fools.com) – ThiefMaster Oct 13 '13 at 13:31

score 0 · Answer 4 · answered Sep 25 '13 at 14:10

0

With this kind of selector you are saying that if the provided string appears anywhere in the value, the CSS rule will be applied.

Here you have a more extended explanation: http://css-tricks.com/multiple-attribute-values/

Hope this helps.

answered Sep 25 '13 at 14:10

Rafa Romero

2,667
5
25
51

Michael Falck Wedelgård · Answer 5 · 2013-10-08T20:16:06.680

-1

It basically means "Selects every element of type (like input fields) which contains class of span.

Take a look at: W3S Schools

edited Oct 08 '13 at 20:16

answered Sep 25 '13 at 11:17

Michael Falck Wedelgård

2,943
1
27
39

It should say "which contains an attribute class where the value contains the string 'span'" – Raidri Sep 25 '13 at 11:27
2

W3Schools is not W3C. Please don't get the two mixed up. – BoltClock Sep 25 '13 at 13:42

score -1 · Answer 6 · answered Sep 25 '13 at 11:20

-1

input[class*="span"] has no differece usage with input.span. input[class*="span"] means that input tag that have class="span"

answered Sep 25 '13 at 11:20

david

3,225
9
30
43

`input.span` is equivalent to `input[class="span"]`, not `input[class*="span"]` (note the `*`) – Raidri Sep 25 '13 at 11:25
2

@Raidri: No, it's equivalent to `input[class~="span"]` (note the `~`) – BoltClock Sep 25 '13 at 13:42

CSS input[class*="span"]

6 Answers6