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"
Related
To select all elements that start with the class name foo. I can use:
[class^="foo"] { }
What can I use to select a custom element that starts with foo.
Example:
<foo-bar>Hola</foo-bar>
<foo-bazz>Hola</foo-bazz>
I want to have a single selector for both elements.
You can't. The [...] selectors only work on attributes, not element types themselves.
What you can do though, as I'm sure you're already aware, is chain them all into one selectors group, but this will mean that you'll need to know the exact element names:
foo-bar,
foo-bazz {
...
}
Failing that, you can always just give them all a shared class or data-* attribute:
<foo-bar class="foo"></foo-bar>
<foo-bazz class="foo"></foo-bazz>
.foo {
...
}
I want to have a class cX where x is a number between 0 and 100. I could add c0 to c100 to my css. But well, I'd like to avoid that.
I know there are ways to match element attributes like h2[rel="external"]. But is it also possible to match class names? Would it also possible to use the matched value within the rule?
Example
.c[x] { height: x%; }
EDIT - CSS attr
After a bit of research, I found that there is a CSS function called attr which is exactly what you are looking for, however, its support is currently limited to the CSS content property and not others, however, it is interesting to keep an eye on it, I reckon it will be the solution of the future
From Moz MDN:
The attr() CSS function is used to retrieve the value of an attribute
of the selected element and use it in the style sheet. It can be used
on pseudo-elements too and, in this case, the value of the attribute
on the pseudo-element's originated element is returned.
Your code would probably look like this:
.c { height: attr(data-height %, 0); }
HTML
<div class="c" data-height="1"></div>
...
This will get the height from the element's data attribute and sets it with the % percentage unit and falls back to 0 if data-height is not found.
Current supported methods:
From the W3 Docs:
6.3.2. Substring matching attribute selectors
Three additional attribute selectors are provided for matching
substrings in the value of an attribute:
[att^=val]
Represents an element with the att attribute whose value
begins with the prefix "val". If "val" is the empty string then the
selector does not represent anything.
[att$=val]
Represents an element
with the att attribute whose value ends with the suffix "val". If
"val" is the empty string then the selector does not represent
anything.
[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. Attribute values must be CSS identifiers or strings. [CSS21]
The case-sensitivity of attribute names in selectors depends on the
document language.
As discussed in the comments, there is no pure CSS solution at the moment, you could try one of the following approaches:
SASS
#for $i from 1 through 100 {
$height: percentage($i/100);
.c#{$i} {height: $height;}
}
Output:
.c1 {height: 1%;}
.c2 {height: 2%;}
.c3 {height: 3%;}
...
LESS
.c-gen(#index) when (#index > 0){
.c#{index}{
height: #index * 1%;
}
.c-gen(#index - 1);
}
.c-gen(100);
LESS code by Harry
Server Side
You could make your server side script output inline CSS for each item
PHP Example:
<?php
for ($i = 1; $i <= 100; $i++) {
echo "<span height='".$i."%'>".$i."</span>";
}
?>
Output
<span height="1%">1</span>
...
jQuery
var i = 0;
$('.c').each(function() {
i++;
$(this).attr('height', i + '%');
//console.log(i); //debug
});
I learned about selector precedence from this tutorial. I have trouble understanding the behavior of this in one case. I have an element in HTML:
<input class="top_bar_login_form_input" type="text" name="email" placeholder="Prijavno ime">
The problem is that properties from another selector override the properties from the class.
As shown in the picture above the class gets overridden by a less specific selector. The element gets selected by input[type="text"], which is less specific than a class. The only reasoning behind these behavior that I see is that the .inputbox class is also calculated in determining the precedence, even though it doesn't match the element.
Why does the type selector override the class selector?
TL;DR Answer
The first rule is more specific than the second one because it has both a type and attribute part for the selector, and thus has precedence:
input[type="text"] { } /* type + attribute for specificity */
.top_bar_login_form_input { } /* only class for specificity, so *less* specificity */
Longer answer
You'd think that the type="text" bit, which is an attribute selector, is more specific than a class selector, in accordance with the MDN page on specificity:
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style
The above quote was in the MDN article at the time this answer was written.
Why that is misleading:
(Tanks to #BoltClock's insights.)
The above only seems correct, but that's because you typically include the element in the selector (e.g. input[type="text"]) when doing an attribute selector. However, what's sneaky: the input bit matters.
Suppose we have the following markup:
<input class="my-class" type="text" value="some value" />
In the following scenario the input renders red:
[type="text"] { color: green; }
.my-class { color: red; } /* last rule matched */
If we reverse the rules in a scenario, the input will render green:
.my-class { color: red; }
[type="text"] { color: green; } /* last rule matched */
This is because both selectors have equal specificity. Now introducing the input selector to the attribute rule will make one of them more specific, which can be seen in this scenario:
input[type="text"] { color: green; } /* most _specific_ rule matched */
.my-class { color: red; }
The W3 spec makes my head hurt, but it does have the details on why the above works. See also the answer by #BoltClock and comments in those code examples for info on how the specificity is calculated.
Your element is matching input[type="text"] in the first rule. Although the .inputbox selectors don't match it, that doesn't affect precedence because a comma-separated list of selectors only counts by the most specific selector in the list that does match an element. If none of the selectors match it then it doesn't count at all.
The reason why the first rule overrides the second is because class selectors and attribute selectors have equal specificity. The input type selector accompanying (or accompanied by) the attribute selector is what causes it to outweigh the lone class selector:
/* 1 attribute, 1 type -> specificity = 0-1-1 */
input[type="text"]
/* 1 class -> specificity = 0-1-0 */
.top_bar_login_form_input
So it's the first selector being more specific than the second, and not the other way around.
If you qualify the class selector with a type so you have input.top_bar_login_form_input, the selectors will be balanced and your second rule will override the first.
I'm looking at a css template that includes .myClass a.extra{...} and .myClass a.extra:hover{...} What does the "extra" mean?
extra is the name of a class.
Since you have:
.myClass a.extra{...}
that rule is applying to all the a elements with the extra class which are descendants of an element with the myClass class.
It's the class of the anchor. When the css says something like a.extra, it refers to an <a> element in html like this:
<a class="extra">Contents</a>
This is an example of a more general concept: x.y refers to any element <x class="y">.
In your example, a.extra indicates an anchor tag with a class name of 'extra'.
Extra link!
Chained selectors mean that both belong to the same element. So if I wanted to select a div with the id of "foo" and the class of "bar", I could define the rule in my CSS like so:
div#foo.bar {
/* disco */
}
Whereas using a space to separate (like in your example) would define a child attribute selector:
<style type="text/css">
.myClass a.extra {
/* disco */
}
</style>
<div class="myClass">
disco
</div>
Check out more attribute selectors here.
The a.extra means any anchor element with a class of "extra".
The entire line indicates:
Any anchor element with a class of "extra" that resides under any elements with a class of "myClass"
In the IUI css file, they use the following selectors:
body > *:not(.toolbar)
body > *[selected="true"]
What does the >, *:not() and *[] mean?
Thanks.
> means "is a child element of". So body > *:not(.toolbar) matches *:not(.toolbar) that is a child of body.
*:not(.toolbar) matches any element that does not have the class .toolbar.
*[selected="true"] matches any element with the selected attribute equal to true.
Keep in mind that the last two (*:not() and *[] are part of the CSS3 spec and you usually can't rely on them for cross-browser CSS compatibility. They are, however, fully supported in WebKit which is what the iPhone (and consequently iUI) use.
> means a direct child
* is a universal selector (everything)
:not() means anything except what's in the parentheses
*[] means anything that matches what's in the brackets
In your case:
body > *:not(.toolbar) // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"] // means any element immediately under the body tag where the selected attribute is "true"
> and * are defined in the CSS 2.1 specification. The :not pseudo class and the [] selector are defined in the CSS 3 specification.
See: http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/css3-selectors/ for more info.
> - Child selector
I.e.
div > p > b {
font-size:100px;
}
This will select all b tags inside p tags inside div tags.
:not(..) - not selector
Matches any element on the page that does not meet the criteria in the parenthesis of the not statement. i.e.
div:not(.toolbar)
Will match any div that does not have the class toolbar
[attr='val'] - attribute selector
This matches any element where the attribute matches the specified value. Example if you want to make all checked check boxes red.
input[checkec='true'] {
background-color:red;
}
You should Google CSS 2.1 selectors for more information.
means child element
.cont > div {
color: #fff;
}
This would be:
<div class="cont">
<!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS
It only affects the below div. Not the p.
so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
<div>jabberwocky</div>
<p>lorem ipsum</p>
</div>