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.
Related
This question already has answers here:
Append the parent selector to the end with Sass
(1 answer)
Using SASS & reference for OOCSS
(1 answer)
Closed 8 years ago.
I have a class named button_class. Now a button or an input tag could have this class. Now using sass, I need to add something to the css if the tag name is input. Like this:
.button_class {
display: inline-block;
/* something like this */
& input {
padding: 2px;
}
}
As you guessed, I don't know how to do that.
SASS syntax doesn't permit this yet. :(
&input gives
"input" may only be used at the beginning of a compound selector
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 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
This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 4 years ago.
Some time ago I saw an example of a css file, where the css rules/selectors where specified in a nested way, e.g. something like this:
div.a {
color: red;
div.b {
font-weight: bold;
}
}
I'm not sure where I saw that (probably in a SO question), or whether it was exactly as shown above.
My questions: Is the above CSS correct/valid? Is it a standard way to specify CSS rules or is this a browser-dependent hack?
That is not valid standard CSS, but it's an example of nesting class declarations using Sass/SCSS or LESS and I believe other CSS extensions out there, which expand it to something like this (which is valid CSS), before serving it to the browser to use:
div.a {
color: red;
}
div.a div.b {
/* Inherits color from div.a */
font-weight: bold;
}
What you are probably referring to is LESS.
The example, you gave is not valid CSS, but is valid with LESS. LESS will "compile" the nested CSS and convert it to something which is valid CSS.
You can nest rules with SASS, http://sass-lang.com/
Maybe that was it?
Seems there is a proposal over at https://tabatkins.github.io/specs/css-nesting/
but I can't find the status of it
This question already has answers here:
What does a star-preceded property mean in CSS?
(4 answers)
Closed 6 years ago.
I'm using the Yahoo YUI libraries in a project. Can anyone help me understand the following CSS that I came across in the layout manager CSS:
I have been unable to figure out what the * (star) does to the declarations in the following CSS:
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
border:1px solid #808080;
border-bottom:none;
border-top:none;
*border-bottom-width:0;
*border-top-width:0;
background-color:#f2f2f2;
text-align:left;
}
This is a hack to apply styles only to older versions of IE
the * declared styles will override the new style elements , that are unsuported by Od IE only.
http://en.wikipedia.org/wiki/CSS_filter#Star_hack
The star exploits a bug in version 7 and below of Internet Explorer and is used to make IE render your markup correctly. More information here: http://www.ejeliot.com/blog/63