As far as I know, the > (#test>div) means that the div is required to be a direct child of #test.
Where a space (#test div) means that it can be a descendant/ancestor relationship. So #test p div would be affected by simply a reference to #test div
What browsers support the first one mentioned?
You can find information for all selectors at http://www.quirksmode.org/css/contents.html
For your questions the supported browsers are the following:
IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf 5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60
Edit: Since it's 2015 I would suggest to have as reference for such questions the can I use? website. For example you can find more info for child selector.
FF2+, IE7+, Opera/Safari/Chrome ( any modern version of the latter ) should support the child selector.
It works great on IE7 (at least) unless you use #div > *, as I've just found out.
Related
I've got the following CSS:
.class1,
.class2:hover,
.class3:disabled { color:red; }
This works in Chrome, Firefox, Safari, IE9 and IE7.
Only browser that doesn't support this is IE8.
Is there a way to make it work?
Tnx
IE 8 does not support the pseudoclass :disabled (neither does IE7) altogether. Multiple classes and :hover are supported.
Unlike IE7, IE8 behaves correctly according to ยง4.1.7 and ignores the entire rule due to the fact that it cannot interpret one of the selectors.
I'm currently trying to style a <meter> tag in all major browsers: IE7-9, FF, Chrome, Safari and even Opera. I've managed to remove the default <meter> styling by using the following CSS code:
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
background: 0;
}
This technique works fine in all mentioned browsers, except Opera! It keeps showing the default green meter. Any idea on how to "destyle" the <meter> tag in Opera?
There is no way yet to style such elements in Opera. There is a proposal called Component Object Model which will obliquely allow us to do such styling when it is in a Working Draft, but we are not close to one.
Webkit has implemented a method that is not in any standard and just a suggestion, and I wouldn't assume this is how it would in the future. Most likely these pseudo-element names would change.
Before I start: shouldn't it be background: transparent; or background: inherit;? See the background property in HTML Dog.
I think you're misunderstanding. The meter::-webkit-meter-bar selector should have no effect at all on IE, FF and Opera since the -webkit part is a selector for Webkit. Chrome and Safari use Webkit as a render engine, but FF uses Gecko, Opera uses Presto, etc.
For FF you would probably need something like -moz-meter-bar...
For Opera I do not know. This Opera community page seems to imply that the prefix would be -o rather than -webkit or -moz.
Good luck.
It's also a good practice to include the "normal" selector when adding such rules.
(And if you're lucky, this might just make it work in Opera.)
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::meter-bar,
meter::meter-optimum-value,
meter::meter-suboptimum-value,
meter::meter-even-less-good-value {
background: transparent;
}
Does :last-child work in all major browsers?
It's not supported in IE 8 and lower but all other modern browsers support it including IE9+, Chrome 2+, Fx 3+, Safari 3.1+ and Opera 9.5+.
References:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
http://reference.sitepoint.com/css/pseudoclass-lastchild
http://www.quirksmode.org/css/contents.html#t35
Short answer: No.
Internet Explorer 7 and 8 are still two of the most used browsers, and they don't support the :last-child pseudoclass.
No it isn't. Most browsers support it since one or two years, MS IE still lacks support.
http://reference.sitepoint.com/css/pseudoclass-lastchild#compatibilitysection
In short it works in all the latest releases of the major browsers, but before IE9 it is not supported.
On which elements the attribute hover works on all browsers ?
I guess the element is cross-browser. What about ? Is there any other element ?
For cross-browser I mean working on Safari, Chrome, Firefox, IE 9, 8 and possibly 7.
It's not dependent on which element it is applied to, apart from in IE5/6.
IE 5/6 supports it only on links.
IE 7 supports :hover, but not :active, on all elements.
Put this link on your bookmarks - it will save you plenty of time.
http://www.quirksmode.org/css/contents.html
So for IE7+ and all other browsers, it'll work fine.
Which browsers support the CSS !important directive, and what are the various quirks amongst the different browsers that do support it?
Excellent browser support.
It was part of the CSS1 spec and has been around forever, and was always easy enough to implement that browsers appear to have gotten it right on the first try.
At the very least (from personal experience) IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Pretty much supported by every browser that supports CSS (which is every browser you care about).
According to Wiki, IE7, FireFox 1.0, Safari 1.0, Opera 7, and Chrome fully support !important. IE6 supports it, but it does have a bug. If you do this, color will be red:
h1 {
color: green !important;
color: red;
}
Any browser which supports CSS1+ - ie, any browser that supports CSS - even IE. Even if the CSS implementations are not fully standards-compliant, !important is a core CSS feature.
To elaborate, IIRC, IE5+, all Firefox, most Netscape, Opera, Safari, Chrome.
All browsers apart from IE6 support it which makes it quite handy for CSS hacks. Example:
#someElement { width:200px !important; width:198px; }
All browsers apart from IE6 will render #someElement at 200px because they will honor the !important. IE6 however will just ignore the !important and render #someElement at 198px.
EDIT: Most common use case scenario for this (at least with me) is using it to correct the double margin bug in IE6