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?
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 the #maincontent element to make sure it looks right.
* 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).
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
}
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.
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.