Learn About CSS3 Pseudo-Classes
2With the release of the latest version of Cascading Style Sheet, also known as CSS3 lots of new features were introduced in the most used styling sheet on the internet. It is easy now to find CSS3 tutorials all over the place and we will try to make one of those about the new pseudo-classes you can use.
CSS3 introduced new pseudo-selectors, from which 16 are approved by the World Wide Web Consortium (W3C). The new selectors enable designers to select elements which are based on a specific range of criteria.
To be more specific, we can recall some of the most important pseudo-classes in the former versions of CSS. CSS1, completely published in 1996 has brought four selectors and most of them are still used today. We are talking about :link, :visited, :hover and :active. Those four selectors are used in <a> elements and were included in CSS1 to style hyperlinks in their different state. These four selectors introduced on the web were something that way back then was not quite usual: interactive and dynamic elements.
Image by shutterstock
CSS2 was published in the summer of 1998 and introduced new selectors mostly used for positioning, such as :first-child and :lang(). The first one is still used today for adding or removing a top border on the first element in a list. The other similar selector :last-child, was first introduced in CSS3. The other selector introduced in CSS2 was used for indicating the language of a document, which today is usually done within the HTML document.
The pseudo-selectors allow elements to be styled dynamically. This means once the user interacts with the specific element, it will automatically be styled another way than the default one. The new classes from CSS3 allow styling the content based on its position or its state.
The 16 new selectors were classified into four different categories: Target Pseudo-Class, UI Element States Pseudo-Classes, Structural Pseudo-Classes and Negation Pseudo-Class. In this CSS3 tutorial we will break the four categories into pieces and will take a look at all the new elements approved by the W3C.
1. Target Pseudo-Class (:target)
In this category we only have one selector, but this is very useful and a new interesting one. It allows designers to style elements based on the URL. If the URL is followed by an identifier (#) – let’s say it is an anchor tag – you will be able to style the target anchor with a background image, link color or any other style you want. This way you can make specific targets highlighted for the user.
If you have external links that take users to your site, this is a great way to highlight for them what they are on your page to read. Sometimes, queries just take you on a total new webpage and you have to search the wanted content. But, if you design it for the user, he will see it immediately.
2. UI Element States Pseudo-Classes
There are two new elements here. One of them is :checked, which is basically useful for dealing with the state of an element, including radio buttons or checkboxes. The :checked selector gives users feedback on what they have selected.
Image by shutterstock
The other element, or actually group of elements, is :enabled and :disabled. It basically does the same thing as the first selector, but it is more useful for the developers. Many scripts and forms show fields that can or can’t be filled in using this kind of selectors. The color of the :disabled selector is usually red; this will make the text turn red and show the user there is something wrong with his input.
3. Structural Pseudo-Classes
Ten out of the 16 selectors introduced are classified as being structural. We will take short look at the most useful ones and only name the rest:
:root – This selector styles the root element on a page which in most of the cases is HTML. In my opinion, this is confusing as you can just style the <html> in CSS directly and do not need a different selector for this one. But maybe W3C prepares something for us in the next releases, otherwise I can’t seem to get why the :root selector exists.
:last-child – This is the brother of :first-child, which was introduced in the previous CSS release. This one simply styles the last child of its parent element.
:nth-child(n) – This one requires a bit more research and expertise, so we will talk shortly about where you can employ it. This selector matches elements on the basis of their positions in a list of child elements. The argument in the parentheses, n, can be a keyword, number or mathematic expression.
:nth-last-child(n) – It operates the same as the selector presented above, but it works in reverse and counts from the last item in the selection.
:nth-of-type(n) – With this one designers can get even more specific and style only particular elements. Let’s say you want the third paragraph to have a larger font or another color. This time you need to use 3 as the argument and the p symbol in front of the whole selector: p:nth-of-type(3) {font-size: 1.2 em; color: #F0F;}.
:nth-last-of-type(n) – This one works like the one presented above, only it counts in reverse.
:first-of-type(n) and :last-of-type(n).
: only-of-type(n).
: only-child.
:empty.
Image by shutterstock
4. Negation Pseudo-Class
There is only one element introduced here, namely the :not selector. You can use it to style whatever you want in your page without a specific part of it, such as the content. The code will look like this:
:not (content) {
font-size: 1.2em;
color-size: #FFF;
}
This will make everything besides the content in white color and written with a font size of 1.2 em.
Compatibility
The new CSS3 features are available and compatible with the latest versions of all the major browsers in the world. However, if you still have Internet Explorer 8 running on your machine, CSS3 will not be very useful. Microsoft released Internet Explorer 9 few months ago and I advise you to update to the latest version if you want to work with CSS3. Chrome, Safari, Mozilla and Opera are all compatible with CSS3.
Considering there are lots of CSS3 tutorials on the internet and we try to bring you as many new reviewed features as possible. I think you should start to use the new CSS3 selectors right away. I know many users didn’t update to Internet Explorer 9 yet, but they will do it sooner or later. The next version of Windows will definitely have Internet Explorer 9 integrated and the new release is actually capable of a lot more than its predecessors, so upgrading to IE9 should not be an issue. I think as fast as you get acquainted with CSS3 and HTML5, you will be able to design webpages up to the latest standards. So, even if you don’t design pages using these two new technologies, at least give them a test try on your personal computer and see how well you get them. It’s never too early to learn.
Thanks a lot for sharing this nice post! excellent job 🙂
waw! This is a usefull post. Great post of help me. Thanks for sharing the info. Very Useful.