:focus on elements that aren't valid

RSteinwand · Post by **RSteinwand** » Wed Jan 08, 2014 10:07 am

Hi Albert,

Hope you're staying warm.

I noticed today I had links with "focus" attached to them.

#main a:hover,#main a:focus,label:hover,label:focus,....

Not sure where that came from, but I should have used "active".

Validator didn't complain about it.

http://www.w3schools.com/cssref/sel_focus.asp

The :focus selector is allowed on elements that accept keyboard events or other user inputs.

Is that your opinion too that my use was invalid?

Post by **Albert Wiersch** » Wed Jan 08, 2014 11:31 am

Hi Rick,

I'm fairly certain that :focus is valid on "a".

See this test document:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Test of a:focus</title>
	<meta name="generator" content="CSE HTML Validator (http://www.htmlvalidator.com/)">
	
	<style>
	a:focus { color: orange; }
	</style>
</head>

<body>

<p>Have you tried this <a href="http://www.htmlvalidator.com/">HTML validator</a>?</p>

</body>
</html>

If you select the link using the Tab key, then the link text turns orange.

RSteinwand · Post by **RSteinwand** » Thu Jan 09, 2014 2:44 pm

Hi Albert,

Thanks for the reply.

I'm under the impression this is one of those legacy things from way back, since I found nothing online regarding links and focus, just input. Thanks for your sample code, but bear in mind, a lot of invalid code works.

I've already changed all my code over to :active and will avoid this like the plague, esp. after embarrassing myself online.

Lou · Post by **Lou** » Thu Jan 09, 2014 4:13 pm

It may not be current but my copy of "Cascading Style Sheets Level 2 Revision 1, (CSS 2.1) Specification," W3C Candidate Recommendation 19 July 2007, defines the following":

:link pseudo-class applies for links that have not yet been visited.
:visited pseudo-class applies once the link has been visited by the user.
:hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.
:active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
:focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

Users with low bandwidth will notice :focus as the new element is received and loaded.

The document also notes that the order the selectors are defined is important. :link, :visited, :hover should be in that order so that for example, the color for :visited will override :link and both will be overridden when the user hovers.

Post by **Albert Wiersch** » Thu Jan 09, 2014 4:24 pm

Thanks Lou.

Links can get keyboard focus (causing the link to be visited when pressing 'Enter'), so it seems perfectly fine to use :focus with an "a" element.

As for the order of those pseudo-classes, here is more information:
http://stackoverflow.com/questions/1699 ... rect-order
http://www.w3.org/TR/CSS2/selector.html ... do-classes

RSteinwand · Post by **RSteinwand** » Wed Feb 05, 2014 2:56 pm

Sorry, I had this all wrong.

Reverting my changes as we speak.

CSS HTML Validator

:focus on elements that aren't valid

:focus on elements that aren't valid

Re: :focus on elements that aren't valid

Re: :focus on elements that aren't valid

Re: :focus on elements that aren't valid

Re: :focus on elements that aren't valid

Re: :focus on elements that aren't valid