NOT and :focus
September 23, 2003 | View Comments (0) | CSS Hidden Gems
I have made two subtle changes to my stylesheet here at whitespace. Besides the obvious taking away the outside border I have made a small change to the comments form and links on the site.
Note: I have only tested these in Firebird 0.61 so please gimme feedback on other browsers.
:focus
We are all familiar with the pseudo classes :link, :active, :visited, and :hover that can effect the properties of links on our page. But while going through some geek reading of the W3C CSS-3 recommendations I found a pseudo class called :focus. From the W3C site:
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
So apparently it does not seem that :focus would be helpful when it comes to links because what else can we do besides :hover? But it can be very useful on form inputs. When clicking on a textbox you can change the property of that textbox. For example, click on the textbox and the background color should change to a light gray.
If it worked in your browser then great and to be honest it should since this was implemented with the CSS1 and CSS2 specs. This can be very useful for all forms because it gives the user an idea of where they are. If they decide to leave they can easily come back and continue on filling out the form. If your users like to TAB through their forms they no longer have to guess where the next TAB is going to take them, they will see it right before their eyes without searching for the cursor. The CSS used to implement this:
input:focus, textarea:focus { background-color: #eee; }
NOT
First I got this idea from reading Andy Budd's entry on CSS attribute selectors and also Jason's beautiful blog where he places external images to links that go outside of his site. I to wanted to have images to tell readers which links go outside of my site because I have lot of links the reference both external and internal material and at least to me it could be helpful to differentiate between the two. Jason uses classes in his links to depict which ones are external. Being the lazy person I am I knew there would be more than a couple of times that I would forget to use the class within the link. I then saw Andy's blog and read a comment (first one) showing how you can add images to links that are pdf's (another useful feature). I could easily do this with links on my site. The problem occurs when I want to differentiate between external and internal. I could easily show the internal links through:
a[href*="9rules"] {
padding-right: 12px;
background: transparent url("images/aoutside.gif") center right no-repeat;
white-space: nowrap;
}
This places the image on all links that contain "9rules" in their href. That is obviously what I did not want to do. I need a "not equals" function in CSS. Well there is one, it just took me a while to find it. Here is the code.
a:not[href*="9rules"] {
padding-right: 12px;
background: transparent url("images/aoutside.gif") center right no-repeat;
white-space: nowrap;
}
Trackback URL: http://wolverine/cgi-bin/mt-tb.cgi/3