Pseudo-classes are little snippets of code that will add additional effects to some selectors.

Pseudo-classes

The syntax for Pseudo-classes is very much like the syntax for css:

selector {property:value;} /*CSS Syntax*/
selector:pseudo-class { /*Pseudo-class Syntax*/
     property:value; 
     property:value;
}

:link, :visited, :active, :hover

A very widely used example of Pseudo-classes is adding styles to links. Consider the following:

a:link, a:visited {
     text-decoration:underline;
     color:#ff9300;
}

a:hover {
     text-decoration:none;
     color:#ff9300;
}

These are called "global link styles", these are styles that will apply to any and all links on a page where this code is. We have our pseudo-classes a:link, a:visited, a:hover and each is doing something different.

1. a:link

a:link sets the styles for an unvisited link:

a:link {
     color:red;
     font-weight:bold;
}

2. a:visited

a:visited sets the styles for a visited link:

a:visited {
     color:blue;
     font-weight:bold;
}

3. a:hover

a:hover sets the styles for links that you mouse over:

a:hover {
     color:aqua;
     font-weight:bold;
     text-decoration:unerline;
}

4. a:active

This sets the styles for a link that is currently active:

a:active {
     color:coral;
     font-weight:bold;
     text-decoration:unerline;
}

Order

Order is key when using these particular pseudo-classes. When you write these styles you must follow the correct order to make it all work.

a:link { /*This must be first*/
     color:red;
     font-weight:bold;
}
a:visited {  /*This must be second*/
     color:coral;
     font-weight:bold;
}
a:hover {  /*This must be third*/
     text-decoration:unerline;
     color:blue;
     font-weight:bold;
}
a:active { /*This must be last*/
     color:green;
     font-weight:bold;
}

We can also group the pseudo-classes together like this:

a:link, a:visited {
     text-decoraton:none;
     color:#ff9300;
}

a:hover, a:active {
     text-decoration:unerline;
     color:coral;
}

Like other CSS selectors, we can add a class selector to the Pseudo-classes, this would enable us to apply these styles any where on our web page if we desired it to be so.

selector.class:pseudo-class {
     property:value;
     property:value;
}

a.fancy:link, a.fancy:visited {
     text-decoration:underline;
     color:#ff9300;
}

This class fancy will make a link and you visit that link that we create, it will be underlined and be that atomicpages orange color.

:first-child

The first-child pseudo-class is as it sounds. This will apply any styles that you define to the first-child element of a parent element. Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:normal 11px Verdana, "Times New Roman", sans serif;
     color:#fff;
}

p:first-child {
     color:blue;
     text-decoration:underline;
     font-weight:700;
}

We can use the first-child pseudo-class in some very helpful ways too! If, for instance, you wanted to apply a style that would make the first paragraph unique, we could use the first-child pseudo-class to achieve this goal. Consider the following:

.fancy p:first-child {
     color:red;
     font-style:italic;
}   

This would set the first paragraph of the class "fancy" to be red and italic and all subsequent paragraphs to be whatever we set the styles to.

If you want to see pseudo classes in action feel free to click on the green download button below to see these examples in action!

pseudo-classes.zip
pseudo-classes.zip
Size: 1.88 KB
Be Sociable, Share!