What does the selector [class^=“span”] do?

Question

I can\'t work out what this is:

Line 33 of http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css

.row [class^=\"span\"] {
  display:         


        

Answer 1

This means a class beginning with the word "span", such as:

<div class="spanning"></div>

The ^ symbol is taken from regular expressions, wherein this symbol refers to the beginning of a string.

It should be noted that this checks for the beginning of the class attribute, not the beginning of the classname. Which means it will not match said selector:

<div class="globe spanning"></div>

The above element has two classes, the second of which begins with "span" - but since the attribute class begins with "globe", not with "span", it will not match.

One could use [class*=span], which would return all classes containing span, but that would also return other classes, such as wingspan.

AFAIK, the way to get classes that begin with a string are to use a double selector:

.row [class^="span"], .row [class*=" span"]{}

This will return the class beginning with span, whether at the beginning of the attribute, or in the middle.

(I also recall working in a solution in the homegrown selector engines used by DOMParser).

Answer 2

That is a CSS attribute Selector.

Have a look at http://www.w3.org/TR/css3-selectors/ (Section 2)

E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"

Answer 3

That is an attribute selector, specifically one of the CSS3 substring-matching attribute selectors.

This rule applies styles to any element whose class attribute begins with span (^= means "starts with"), that occurs in any element with the class row.