What is pseudo-class?

Unknown Data · 1 What is pseudo-class? Sun Oct 31, 2010 4:51 pm

Unknown Data

Registered Member

Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser : Safari

What is pseudo-class?
Learn CSS - part 8

What is pseudo-class?
I CSS is it popular to use the pseudo-class to give the selectors special effects. As an example can you edit the links by highlightning by mouseover, switching color, depending on whether the link has been visited or not. In other words, do you put your links in different states! Similarly, you can change the first line or the first letter.

Syntax
As mentioned in lesson number 2, is the CSS syntax shown like this.

Code:: selector { property: value; }

By using pseudo-class it the syntax showen like this.

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

This could also be a possibility, depending on what the application is.

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

Anchor
CSS is well suited to achieve effects associated with liks on the page. You can display visited links in one way and unvisited links differently. The only requirement is that the browser supports this.

You can see some quick examples about this under this content.

Code:: a:link { color: #CCFF00; } a:visited { color: #CC0000; } a:hover { color: #00FF00; } a:active { color: #FFCC00; }

Notice! This is important to plalce it like this, it won't work if you place a:link after a:active etc.

One more example
These functions are used together with the CSS' class.
The example shows the use of the syntax:

Code:: Selector.class:pseudo-class { property: value; }

By using it, could it look like this.

Code:: a.1:link { color: #CCFF00; } a.1:visited { color: #CC0000; } a.1:hover { color: #00FF00; } a.1:active { color: #FFCC00; }

And this.

Code:: a.2:link { color: #000000; } a.2:visited { color: #FFFFFF; } a.2:hover { color: #FFCC00; } a.2:active { color: #00FF00; }

First-line
A First-line pseudo element is used to give a special effect to the first line of a chapter, a sentence or similar.
Notice the phrase in the html document is written in small letters, but will change with'first-line' pseudo-element.

Here is a quick example to how a input could look.

Code:: p:first-line { font-variant: small-caps; color: 00FFCC; }

First-letter
The First-letter got the same effect as First-line, just is it only the first letter that's being changed.
We got an example to show you it agian.

Code:: p:first-letter { font-size: 150%; float: left; }

So much for the pseudo-class. Now try to play a bit with the above-mentioned examples, it is actually easier than you think. The next lesson is about the attributes class and id.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

Quick Menu

Quick Menu

1 What is pseudo-class? Sun Oct 31, 2010 4:51 pm

Unknown Data