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.
Related
I tried this:
input[time] {
margin: 2px;
}
...but it does nothing.
Just to see what, if anything would happen, I also added parring: 2px; but still nothing. So how can I get the time element to shove other elements that invade its personal space out of the way?
you need to specify it is a type like so
input[type="time"]{
margin: 2px;
}
This article goes other this further if you are interested,
Kieran
Use input[type="time"] instead of input[time]
The [attribute] CSS selector targets HTML tags who have a certain attribute no matter the attribute's value.
The [attribute="value"] CSS selector targets HTML tags with an attribute with a set value.
I just found the :root pseudo class.
The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the element and is identical to the selector html, except that its specificity is higher.
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
What exactly is it used for? Why would anyone ever use it aside from higher specificity when you can just use the html selector?
The answer here is:
except that its specificity is higher.
And why does it matter?
In a normal CSS scenario, if you have something like this:
html {
background-color: red;
}
html {
background-color: blue;
}
You will get the blue background, because it's evaluated last. You can see here.
But, if you have this instead:
:root {
background-color: red;
}
html {
background-color: blue;
}
You'll get the red background. You can see here.
Imagine a scenario where you import several libraries and some of then set some properties on the html that you want to get rid of. You can define your properties as !important, you can organize your imports so what you want is evaluated last or you can use the :root selector.
Others Scenarios
As pointed by #user2864740 and #13ruce1337, CSS is not only applied to HTML, but it can be applied to any kind of XML document, including plain XML, SVG and XUL. The :root pseudo class will select the root of other types of document correctly.
UPDATE: This may not be possible. I'm still looking for a solution.
I need to create a CSS selector to select all the page elements using * which would exclude .exception elements along with ALL its descendants (!). This .exception element and its descendants needs to detain its initial styles while * styles should be applied to all the other page elements.
IMPORTANT: The solution is not good if any styles will be applied to .exception and its descendants first and then I need to override it to its initial values manually! I don't want to apply ANY STYLES to .exception and/or its descendants AT ALL!
Desired result
Please keep in mind that this is only a trivial example. The page where I need to apply the solution contains much more elements so I need a generic solution for filtering the elements. Manual selection and overriding elements wouldn't be possible there.
http://jsfiddle.net/zV5gf/2/ (initial state, no solution)
Solution with :not selector - not perfect
This solution is not good enough because it WILL EXCLUDE li.exception but it WILL NOT EXCLUDE its descendants. li.exception descendants initial styles will be lost.
http://jsfiddle.net/zV5gf/3/
*:not(.exception){
background-color:orange !important;
}
and the logical solution for div.exception and its descendants doesn't work (not supported by browsers):
*:not(.exception *){
background-color:orange !important;
}
How about putting background:inherit to its children?
*{
background-color:white
}
*:not(.exception){
background-color:red
}
.exception *{
background:inherit;
}
JSFiddle
If you can use jquery this is dynamic.
$(".exception").find("*").addClass("exception");
Fiddle
Anyway you are going to mention the colors for differentiation then why we use 'background: inherit'. Instead of that use simply the below
*:not(.exception) {
background-color: red;
}
.exception, .exception * {
background-color: white;
}
Maybe something like this * :not(.exception *) { /* apply styles */ }
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/
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;
}