:focus on elements that aren't valid

For technical support for all editions of CSS HTML Validator. Includes bug reports.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

:focus on elements that aren't valid

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

Hi Albert,

Hope you're staying warm. :D

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

Code: Select all

#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?
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: :focus on elements that aren't valid

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.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: :focus on elements that aren't valid

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. :D

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

User avatar
Lou
Rank V - Professional
Rank V - Professional
Posts: 276
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: :focus on elements that aren't valid

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.
Lou
Say what you will about Sisyphus. He always has work.

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3412
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: :focus on elements that aren't valid

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
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: :focus on elements that aren't valid

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

Sorry, I had this all wrong. :?

Reverting my changes as we speak.
Rick

Post Reply