This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What does an asterisk do in a CSS property name?
I'm going through css style sheet provided with twitter bootstrap 2.0 and I see a lot of properties for which a * is appended before them. Ex: *margin-top , *zoom, *display etc..
What does this * imply ? Ex: listing of one of the rules -
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
direct link for bootstrap.css file
This is called a CSS hack. Its intent is to target specific versions of IE:
The *<property> is used to target IE7 (and below).
This aticle for NetTuts explains it well
Related
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I am working on improving my basic css fundamentals and came across this question that I could not seem to google the answer.
In twitter bootstrap 2.3.2, there are a couple times within bootstrap.css where the stylesheet is as the following:
ul.inline > li,
ol.inline > li {
display: inline-block;
*display: inline;
padding-right: 5px;
padding-left: 5px;
*zoom: 1;
}
and another example would be:
.row-fluid .span12 {
width: 91.48936170212765%;
*width: 91.43617021276594%;
}
* is a universal selector. If they added *width after "width", *width will override the "width" before, correct? Please advise.
PS: I already researched this question and was not able to find the answer. If this is similar, I would really appreciate a link to the other post, thanks.
This is an explorer hack. Version 8 read this while others ignore it.
IE in sometimes need different css then other versions.
This is a refernce from a google search:
explorer 8 asterisk hack
javascriptkit and there are many more.
Note it's in the unrecomended section.
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
This question already has answers here:
What does an asterisk (*) do in a CSS selector?
(5 answers)
Closed 9 years ago.
Ok, looking at some code in a CSS Stylesheet assigned to a project, I noticed this:
* {
margin: 0px;
padding: 0px;
text-decoration: none;
}
What does this bit do?? What elements does it effect exactly?? Strange, never heard tell of using the asterisks as a selector or whatever it is supposed to be for. What does the asterisk do exactly?
* affects (I should say "represents the qualified name of") all elements. Per spec:
http://www.w3.org/TR/selectors/#universal-selector
The asterisk is the 'universal selector' and applies the style to all elements on the page. This code will reset everything to have no margins, padding or text-decoration.
Universal selector on W3.org
It is the universal selector, much like the '$' in jQuery. It is usually used in the reset
This question already has an answer here:
What is haslayout?
(1 answer)
Closed 8 years ago.
I see that the css property zoom: 1 is often used in stylesheets.
For example twitter bootstrap uses it in its fluid layout:
.row-fluid {
width: 100%;
*zoom: 1;
}
I know that it is primarily used for IE layout issues...
What is it actually used for and why? Is it only necessary to use it for fluid layouts?
http://reference.sitepoint.com/css/haslayout
in IE, some elements have no layout - which results in huge PITA in designing - so there are many non-intrusive ways to give them 'layout'. zoom: 1 is one of them.
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I've been using Twitter's Bootstrap package to build a site, and was browsing through the CSS when I came across the following (more or less, cruft redacted for clarity):
.btn-primary {
background-color: #006dcc;
*background-color: #0044cc;
}
Now, I've seen * used as part of the selector, both as part of a constructor like li li * { ... } and as part of an attribute selector a [name*=foo] (and obviously as part of CSS comments /* */), but I've never seen this before. Can anybody share any insight as to what it's being used for? I've also seen it in the following (complete) context:
button.btn,
input[type="submit"].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
where the * is in front of two related but distinct properties. What's going on?
This article should answer your question. It's basically a way 'hacking' CSS selectors to target a certain browser.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
css: the meaning of * mark
What does the symbol * mean in CSS3. As used in a code;
*{
margin: 0;
padding:0;
}
this refers to all the elements and this particular code will make all the element's margin and padding as 0
It's basically a reset style. To cancel out differences in user agent/browser styles.
* is a general and CSS wildcard, the selector you show above selects all elements in a HTML document. It is commonly used in reset stylesheets and is sometimes referred to as a universal selector.