This an old entry that I am resurrecting since I am sure many of us need a reminder of these two useful CSS classes.
:focus
We are all familiar with the pseudo classes :link
, :active
, :visited
, and :hover
that can effect the properties of links on our pages, but while going through some geek reading over at 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 :focus
would not be helpful when used with links, 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.
This can be very useful for all forms because it gives the user an idea of where they are on the form. If they decide to leave they can easily come back and continue 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 is:
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 wanted to have images on my links to tell readers which links go outside of my site because I have lot of links that reference both external and internal material and 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 needed 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;
}
An alternative that does not place any space between the image and link:
a:not([href*="9rules"])::after {
content: url("images/aoutside.gif");
}
Now I am getting the desired effect. Users who read my link heavy entries will know just by looking at the link whether it is external or internal. The possibilites of this are endless. You can have different colors, sizes, decorations or anything else you could think of in one stylesheet.
Originally posted on May 18, 2005 @ 12:00 am