Does :hover in css only works on <a> tags? Or it can work on any HTML tags? Thank you.
It applies to any element, but IE6 and earlier have a bug which only lets it work on links (<a> elements with an href attribute).
Quirksmode has the answer!.
The summary: IE6 only supports :hover on links. Everyone else supports them everywhere.
Related
Is there a way, in pure CSS, to change the style of an element if the fragment identifier (hash) in the URL references it?
i.e.
Given this HTML:
<p id="reference">lorem ipsum</p>
And this URL:
http://example.com/#reference
The browser will scroll to the paragraph with the id of reference, but can I change the style of that element without JavaScript?
I thought I could do this with the :focus psuedo-class, but it did not work. And the other 3 deal with mouse events (:hover, :active) and URLs (:visited), so none of these would work.
It’s easily done with CSS only, no JavaScript needed. Use the :target pseudo-class selector:
p#reference:target{background-color:gold;}
<p id="reference">lorem ipsum</p>
to target
untarget
Also read MDN for browser support (IE9+) and additional information.
There should be a :target selector that does exactly this, with reasonable support.
After years of using the <a> tag I've never found an answer to a long-asked question.
To crack down on the stylings of a <a> tag I usually apply four styles:
.element:link{text-decoration:none;color:#CCC;}
.element:hover{text-decoration:none;color:#CCC;}
.element:active{text-decoration:none;color:#CCC;}
.element:visited{text-decoration:none;color:#CCC;}
Because as most of you probably know, browsers tend to apply a default underline and royal blue colour to links.
When I say What is the bare minimum styling for a element is there a way I don't have to apply all of these styles? Will the :hover, :active and :visited inherit the :link style? and is it compatible across all browsers?
P.S.
I know that the above is the same as
.element:link, .element:hover, .element:active, .element:visited{text-decoration:none;color:#CCC;}
So please don't answer with that (:
The bare minimum is no styling at all -- so that the browser will automatically apply its default styles.
The usual default is indeed royal blue for link, red or purple for visited, and nothing in particular for the rest.
Answered because #Rob said I should put it here
a.element{}
or
.element {}
You just use
.element {text-decoration:none;color:#CCC;}
and that's it.
If you want to additionally style :hover or :active state, you do it after .element {}
If you want it to apply to all your links, you can use
a {text-decoration:none;color:#CCC;}
I was recently fiddling with contenteditable in a webpage and got irritated when I needed to set a large number of span tags with it (I ended up using JavaScript to do it). If only I could set it via CSS...
Does anyone know the rationale behind why contenteditable was designed as an attribute rather than a style?
Most people would argue that contentEditable defines behaviour, rather than style (which is true).
WebKit has a CSS property that is similar to contentEditable: -webkit-user-modify.
try
span {
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
}
it worked on Firefox, Chrome. You can find more info about user-modify
The ability for the user to edit some content or not isn't anything to do with presentation.
styles are optional; you can (in theory) render every page without CSS and it should still work fine. In fact, that's what many text-only browsers, or audio-only browsers do.
contentEditable changes the behavior of elements. A browser that doesn't use style, but interprets JavaScript, should still benefit from the property.
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 it possible to use the noscript element in CSS selectors?
noscript p {
font-weight: bold;
}
Yes! You can definitely do that.
In fact, many (all?) browsers support targeting any arbitrary tag using CSS. "Official" tags in the HTML spec only define what a browser should do with them. But CSS is a language that targets any flavor of XML, so you can say foo {font-weight:bold;} and in most browsers, <foo> hello world </foo> will come out bold.
As Darko Z clarifies, IE6/7 do not add arbitrary (non-standard) elements to the DOM automatically from the source; they have to be programmatically added.
I have an IE bug to keep in mind. If, like OP, you just want to style text within the noscript tag and not the noscript tag itself, please disregard this..
Say you want to make the noscript tag's background red. In IE8, it will show up with JS enabled. Just the box itself, not the text inside.
So this combination isn't good:
CSS
noscript {
background-color: red;
}
HTML
<noscript>Turn on your damned JavaScript! What is this, 1999?</noscript>
But this workaround works fine:
CSS
noscript div {
background-color: red;
}
HTML
<noscript><div>Turn on your damned JavaScript! What is this, 1999?</div></noscript>
Weirdly, I only see this behavior in IE8, not IE7. And who knows about 6..
In addition to Rex M's answer - IE 6/7 (6 def, 7 maybe?) will not style an arbitrary tag for you. But lucky for you as with all many IE problems there's a workaround.
Say you want to style an element called foo. To get IE to recognise it as a styleable element you need to include this line somewhere in your JS:
document.createElement('foo');
You don't need to append it, just create it.
This will kick IE into styling that element for you with the CSS rule:
foo { font-weight:bold; }