This question already has answers here:
Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
(3 answers)
Closed 5 years ago.
I'm wondering is there any difference between using the :disabled CSS pseudo-class selector and the [disabled] CSS attribute selector (e.g. different browsers support or whatever) to apply styles on a disabled HTML input element or are they totally equivalent?
:disabled is introduced in css3. [disabled] exists from css2.
I would prefer :disabled over [disabled], see this question from: Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
The :disabled approach is supported by browsers that support CSS3, while [disabled] is supported by browsers supporting CSS2 onward.
Browser support is very similar for both; the major difference being IE7 backward vs IE9 backward compatibility.
Likewise, the [disabled] approach is supported by native browsers in older mobile OS versions.
For more details, refer to:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
Related
I just read this code somewhere.
*html #menu ul{margin: 0px 0px 0px 40px;width:960px;}
I know * means the selector means any element in css.
But is this needed here? Since it works totally the same without it.Or is it some kind of CSS hacks in specific browsers ?
It is a CSS hack targeted at Internet Explorer 6 and below. More modern browsers should ignore any of the styles applied using *html.
List of browsers which will apply the styles
IE4-6/Win
IE4-5/Mac
IE7+, when in backwards compatibility mode (aka quirks mode)
List of browsers which will ignore the styles
IE7+, when in Standards Compatibility mode
Firefox
NS6.0-7.2
NS4.x
Opera 5+ (I don't know about versions 1 through 4.)
Safari
Konqueror 3
iCab 3
Source: * html ("Star HTML") CSS Hack
So, provided your document is valid then IE7+ should display the page in standards mode and will ignore the styles. If the page is being displayed in 'quirks mode' then the styles will be applied in IE7+.
The Star Selector Hack
The star selector hack, also known as the star-HTML hack and the Tan hack, because it was first described in detail by Edwardson Tan, is the most widely used filter; it relies on a peculiar behavior in Internet Explorer 5.5 and 6. Even though it’s often labeled a hack, I’ve included it in this section on filters because, despite the fact that it exploits a browser bug, it uses a valid CSS selector. The selector, however, should never match any elements; all browsers, except Internet Explorer 5.5 and 6, understand this fact and ignore the rule.
The technique is simply to apply a descendant selector that makes use of the universal selector. The universal selector is, of course, valid CSS, so don’t be confused and start thinking that using the universal selector is bad news. The most common form of the technique (and the origin of its name) is to compose a rule with the * html selector. This constitutes valid CSS, but it shouldn’t match any elements. The selector should apply the rule to any html element that’s the descendant of any other element and, as html is the root element, it’s never a descendant of any other element.
However, while most other browsers ignore it, Internet Explorer 5.5 and 6 will interpret this selector as if there was no universal selector, like the rule below:
html {
⋮ declarations
}
Thus, the star selector hack is a safe way of applying CSS rules to Internet Explorer 5.5 and 6 without affecting other browsers.
You’d use it like this:
.test {
position: fixed;
}
* html .test{
position: absolute;
}
Only Internet Explorer 6 and earlier versions will apply the latter rule; other browsers will ignore it.
Source : http://reference.sitepoint.com/css/workaroundsfilters#workaroundsfilters__sect_starhtmlselector
I've found that using a single colon with the pseudo tag first-line works fine. Why is a double colon used for this tag and is it really needed?
From WC3 Schools:
p::first-line
{
color:#ff0000;
font-variant:small-caps;
}
But this works fine:
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
http://www.w3schools.com/css/css_pseudo_elements.asp
As MDN states:
In CSS 2, pseudo-elements were prefixed with a single colon character.
As pseudo-classes were also following the same convention, they were
indistinguishable. To solve this, CSS 2.1 changed the convention for
pseudo-elements. Now a pseudo-element is prefixed with two colon
characters, and a pseudo-class is still prefixed with a single colon.
As several browsers already implemented the CSS 2 version in a release
version, all browsers supporting the two-colon syntax also support the
old one-colon syntax.
If legacy browsers must be supported, :first-line is the only viable
choice; if not, ::first-line is preferred.
Further, as the W3 states:
This :: notation is introduced by the current document in order to
establish a discrimination between pseudo-classes and pseudo-elements.
For compatibility with existing style sheets, user agents must also
accept the previous one-colon notation for pseudo-elements introduced
in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and
:after). This compatibility is not allowed for the new pseudo-elements
introduced in this specification.
MDN for ::first-line (:first-line)
CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.
The situation on ::before and ::after are pretty much the same.
CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.
MDN for ::before (:before)
MDN for ::after (:after)
You might ask:
What's the difference between Pseudo-classes and Pseudo-elements?
Answer from MDN
Answer from Stackoverflow
I'm dissecting this very beautiful example of how CSS can help you create nice glow effects on images.
http://jsfiddle.net/necolas/KbNq7/
This particular line from the example mentions:
Although this method will only produce the full effect in Firefox 4,
other browsers will eventually catch up and apply transitions to
pseudo-elements.
What is a pseudo-element?
Pseudo-elements are CSS selectors that manipulate parts of an element in a special way.
They include:
:first-line
:before
:after
Application
Pseudo elements are applied like so
p:first-letter{
color:black;
font-style:italic;
}
Note: the : followed by the selector is how pseudo elements are denoted in CSS1 and CSS2. In CSS3, the double colon is used (::) to distinguish them from pseudo-classes.
More details here: http://reference.sitepoint.com/css/pseudoelements
Support
Support is decent for a number of browsers, with older versions of IE notably poor with support. QuirksMode has a compatibility table (a bit out-of-date but still useful): http://www.quirksmode.org/css/contents.html#t15
Cool Tricks
Pseudo elements can do some cool things, including
show the URLs of links in printed docs
fake a float:center;
See more here: http://css-tricks.com/9516-pseudo-element-roundup/
With jQuery
jQuery has a number of unique selectors that enhance and expand on the native CSS group:
http://api.jquery.com/category/selectors/
Note: you can use jQuery to force older browsers to adopt certain rules. For example, IE6 will ignore :last-child. Using jQuery can force IE6 to apply that style.
The Spec
http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors
Its not an element in the dom. Its something you can select with a selector, notably after a :.
http://www.htmldog.com/guides/cssadvanced/pseudoelements/
If I use a class for a normal div, can I write the css like:
.messagebc:hover {
...
}
Is it legal?
It's ineffiecient to use :hover on non-link elements.
Avoid the :hover pseudo-selector for non-link elements for IE clients.
If you use :hover on non-anchor
elements, test the page in IE7 and IE8
to be sure your page is usable. If
you find that :hover is causing
performance issues, consider
conditionally using a JavaScript
onmouseover event handler for IE
clients.
:hover pseudo-selector to non-link elements is a very ineffiecient selector (e.g):
For example:
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.
More info on un-effiecient selectors
why havn't you simply tried it? yes, you can (in all modern browsers, the IE6 knows :hover only on a, if i remember right).
Yes you can use :hover for all elements in modern browsers (IE7+).
While IE6 support :hover only for <a> elements, you should write you html and css so, that you won't need to use js-patches (for example, in list-menus just use <li>Link</li>, not <a><li><a> and assign :hover to the link element. This should do the trick.)
Yes, however in IE6 you can set :hover only on ANCHOR elements.
Only ie6 does not support it on elements other than <a>, but that can be fixed with a simple javascript: ie7.js
The share of the ie6 is 5.55% and is
decreasing everyday
So You may use it
Wikipedia ie6
Every current browser will support it. If you need it to work in an older browser such as IE6 then take a look at #Willem's link.
If by the term class you mean HTML element then yes per W3C spec you can use the :hover selector on all elements. Whether you should or not is a different question.
Sources:
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3.org/2009/cheatsheet/#search,%3Ahover
Is there any CSS 3 property supported in IE7, by default? I mean is there any css 3 properties supported in IE 7 which we can use without the use of Javascript.
See CSS Compatibility and Internet Explorer on MSDN. The list of CSS3 properties that are supported on IE7 is pretty short:
AT-RULES: #font-face
SELECTORS: namespaced, prefix, substring, suffix, general sibling
ATTRIBUTES: ruby-align, ruby-overhang, ruby-position, text-align-last (partial), text-justify, text-overflow (partial), word-break (partial), word-wrap, writing-mode, overflow-x, overflow-y