usage of * symbol in css - css

I found some stylesheets using * symbol on it. for example *zoom: 1; what does the * symbol stands. sometimes which appears like [class*="span"] this. can anybody clear me the usage of the symbol * in css

*zoom is a hack that applies it ie6 and ie7. * { } is a wildcard (matches all elements or subset; if used like #header * it would apply to all descendants of #header). [class*="span"] matches elements that have a class with the word "span" anywhere.

If * is used an independent selector, it means all.
But if used inside the attribute selector [ ], it means "contains". For example, you have
[class*="span"]
. It means, it will select all elements that has a class which has a "span" somewhere in the class name.
It also used as CSS hack if it's inside the style value.

It is a wildcard which select all elements.
For example, if you apply margin to every element on entire page you can use:
* {
margin: 50px;
}
You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:
p * {
margin: 10px;
}
See this:- http://www.stackoverflow.com/a/1204290/2256325
Regarding you example, let me tell you that if you add asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Its only applicable to version 7 or below .
Source :-http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

In addition to using the asterisk (at the start of a property name) to select only for older IE browsers, for CSS the many varied details are at w3.org:
CSS2.1 -- http://www.w3.org/TR/CSS21/selector.html
CSS3 -- http://www.w3.org/TR/css3-selectors/

Related

Box-sizing with * selector is adding unwanted padding

I am using box-sizing and padding in my responsive design.
Effectively by using the following code:
.col * {
}
I am able to target everything within my section named 'col'. This is great, until I start adding elements within each other, then the class gets added again.
I have put together an example here http://jsfiddle.net/XS7KB/1/. You will see that the first line of the <h1> has the box-sizing added again because of the href. I would imagine it's the same if I add another span, list, hr ect. This could be problematic.
What im looking for is a way to apply this to the first set of tags and nothing in between. Perhaps a different selector would prevent this from happening.
Any help would be greatly appreciated.
If by "first set" you mean "first nesting level", use the child selector to limit it only to that set of elements:
.col > * {
}
This will only select the h1 and p which are children of .col, and not anything inside them.
Updated fiddle

IE8: what to use in place of nth-of-type(n)?

I've inherited the following CSS code to initially hide the latter elements of a series of paragraphs and a series of list items.
.profileSection p:nth-of-type(n+2) {
display: none;
}
.profileSection li:nth-of-type(n+6) {
display: none;
}
Obviously, this code does not work in IE8. What is an alternate way to hide these elements?
Here is a discussion on it:
http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/
The writer mentions that you can reference specific children element by using
tagname + tagname + etc
Or get generic children by using
* + * + etc
I personally would just add a special class to those items.
+, the adjacent sibling selector, would allow you to select all siblings which are immediately adjacent. In your case: .profileSection p+p. (If you must do this, consider wrapping it in something to prevent other browsers from seeing it, like conditional comments.)
But + won't help if your markup contains something other than <p> elements right next to each other. For example:
<p>Alpha</p>
<h4>Header</h4>
<p>Beta</p>
If you don't already have some kind of shiv or moderizr functionality on the site (which would help with many other similar issues), it would be easiest to add a special class to the elements, and select using that class.
You can also try downloading and including selectivizr, which makes css3 selectors work in IE6-8

Meaning of '*' in CSS [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
css: the meaning of * mark
What does * do in css? I saw some code here that contained it:
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
Is this a typo?
* means ALL.
In this case it would be ALL the elements in .center-wrapper
It's a wildcard, it matches every element. So in your example, it means every element that's a descendant of elements with the "center-wrapper" class.
According to the official W3C docs, it's called a "universal selector", see http://www.w3.org/TR/css3-selectors/#universal-selector:
The universal selector, written as a
CSS qualified name [CSS3NAMESPACE]
with an asterisk (* U+002A) as the
local name, represents the qualified
name of any element type.
means everthing: every tag/element in document.
In this case .center-wrapper * everything under every element with center-wrapper class.
* is Universal selector.
.center-wrapper * select all descendant elements of .center-wrapper.
* means that the styles assigned to it must be applied to the whole page. It is not a typo.
It means it will select all elements within that portion of the DOM.

What does a star-preceded property mean in CSS?

I was looking at a css file today and found the following rule set:
div.with-some-class {
display:block;
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;
font-weight:normal;
*line-height:13px;
color:#3D9AD0;
}
What does the star mean in *padding and *line-height?
Thanks.
This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).
In CSS? Nothing; it is an error.
Due to bugs in some versions of Internet Explorer, they won't correctly ignore the invalid property name, so this is one way of providing CSS that is specific to those browsers.
Using conditional comments is clearer and safer though.
The asteriks character is a valid wildcard in CSS. Use of it alone means the following CSS properties will be used against all element nodes in the DOM. Example:
*{color:#000;}
The above property will be applied to all DOM elements, thereby defeating the natural cascading in CSS. It can only be overridden by specifically tageting DOM elements where that targeting begins a unique identifier reference. Example:
#uniqueValue div strong{color:#f00;}
The above property will override the wildcard and make the text of all strong elements that occur in a div inside an element with an id attribute value of "uniqueValue".
Using a universally applied wildcard, such as the first example, can be a quick and dirty method for writing a reset stylesheet. It is quick and dirty because granular definition of presentation after the wildcard will likely create an extremely bloated stylesheet. If you are going to use the wildcard I would suggest using it more specifically, such as:
* strong{color:#f00;}
The above example will make the text of all strong elements color red regardless of other CSS properties not specified with a unique identifier. This is considered much safer than using the "!important" declaration as that declaration is known to cause interference with natural functionality of the intended behaviors and is a maintanence nightmare.
The asteriks in your example are in the wrong place as they seem to occur inside the property declarations, the code that goes inside curly braces, and that will likely cause an error.
This is a hack for IE7.
If you write this:
.test {
z-index: 1;
*z-index: 2;
}
on all navigator which respect the W3C Standard <div class="test"></div> HTMLElement have a z-index: 1 but for IE7, this element have a z-index: 2.
This is not standard.
To achieve same thing with W3C Standard, follow this steps:
Add some Internet Explorer Conditional Comment (this is a simple HTML Comment for all other navigateur so, it's a standard way).
<!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->
<!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->
And use the previous rules like this:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}

What does * HTML Body mean in a css style sheet?

In a stylesheet i have:
* HTML BODY
{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 25px;
padding-top: 190px;
}
* HTML #maincontent
{
width: 100%;
height: 100%;
}
i know that a . means class and a # means applied to the id, but what does * HTML mean?
The * is the universal selector, and thus matches any element. e.g.
P * { }
Matches any element which is the child of a P tag
* HTML
should mean nothing because HTML cannot be the child of anything (by definition). It's used because IE (edit, at least IE 5 - 6 - thanks RoBorg!) ignores * and so it can be used to define IE specific styles:
HTML {
// Normal styles
}
* HTML {
// IE Specific styles
}
See http://www.peachpit.com/articles/article.aspx?p=358552
* means any element
HTML and BODY mean the <html> and <body> elements.
Therefore * HTML BODY means a body element inside an HTML element, inside any element.
This is actually a browser hack: some browsers will match it and some won't (Internet Explorer matches, Firefox doesn't, not sure about others).
One reason people add selectors like *, html, or body (or in this case, all 3) to a stylesheet rule is to increase the selector specificity calculation. Of course, html will never be a child of anything else, so * html is a specific IE hack, but there is a reason why people would add html or body to a declaration:
For example:
html p { font-color: red }
p { font-color: blue }
Paragraphs within html tags (as in, all of them) is more specific than just paragraphs, so the font-color will be red, regardless of the ordering of these declarations in stylesheets. If there were a third rule with html body p it would take precedence.
It's slightly less of a hack than using !important but it's better to key off of more semantic tags, if possible.
Well, this is a really bad CSS selector statement, that's what. Let me break it down for you:
[all elements] (sub-selection) [HTML] [BODY]
That is, it goes through all elements to find the HTML element, then the BODY inside. It's problem is that there will only be 1 body element at all times, and #maincontent either should be the BODY or be within it. Period.
As Joel said it might be to remind the designer, but I am not so sure of that. To me, that code is a definite "code smell"!
You should rewrite your CSS selectors to:
body {
And:
#maincontent {
respectively.
For the 2nd snippet, since * matches anything the element item is redundant. It looks like it's there to remind the author of the intent of the styles- that if he changes something in the 2nd snippet make sure he checks the #maincontent element to make sure it looks right.

Resources