What does the selector [class^="span"] do?
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: inline;
float: left;
margin-left: 20px;
}
I understand the style but I've never seen this before
[class^="span"]
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).
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
.
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"