pseudo class a:focus

Question

Trying to find out more about css pseudo class a:focus Am trying to adapt some code. Have tried

a:focus img {border:2px solid rgb(155, 205, 255);}  

and

a:focus img {background:rgb(155, 205, 255);}  

Neither work. Yet

a:hover img {background:rgb(155, 205, 255);}  

works fine on hover. Does anyone know what I've done wrong?
Les

Sorry, am using Firefox, but want this to work cross-browser if possible. I get a flash but not the steady border like this gallery: http://www.cssplay.co.uk/menu/gallery.html#nogo

Answer 1

If your right click on it to give it focus without actually following the link, does it change?

Answer 2

Your selectors seem fine.

A few questions: What browser are you using? As Matt said, are you sure you are focusing the tag?

Answer 3

If you're using IE8,

Note: Internet Explorer 8 (and higher) supports the :focus pseudo-class if a !DOCTYPE is specified. (Source: http://www.w3schools.com/CSS/pr_pseudo_focus.asp)

---

Investigation: Seeing that you're using Firefox, click on a blank page and press Tab on keyboard, with the following CSS:

a:focus img {border:2px solid rgb(155, 205, 255); padding: 2px;}

See if this works, and report appropriately.

Also, does the <a> tag has other pseudo-classes outside of focus?

---

Just a suggestion, based on yoru example http://www.cssplay.co.uk/menu/gallery.html#nogo, they did this:

#container a.pics:focus img.thumb {border:1px solid #fc0}

Why don't you do this?

a img:focus {border:2px solid rgb(155, 205, 255); padding: 2px;}

Answer 4

It looks like clicking a link that takes you elsewhere on the same page is causing that link to loose focus. Not the most elegant solution, but what I can come up with involves javascript.

For the style:

a.selected img{border:9px solid green}  

And then a script:

<script type="text/javascript">
    var last = null;
    function select(element)
    {
        if(last != null)
            last.className = last.className.replace(/ selected/g, "");
        element.className += " selected";
        last = element;
    }
</script>

And then add an onclick event handler to each thumbnail link:

<li><a href="#pic1" onclick="select(this);"><img src="thumbs/whatever.jpg" alt="whatever" /></a></li>

Answer 5

Try setting the border on the a tag rather than the image tag inside of it.