What is Pseudo-classes in cascading style sheet?

Answer 1

You may not know it, but a link has four different states that it can be in. CSS 2.1 allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

* active - this is a link that is in the process of being clicked

* focus - applies a style to an element in focus

* hover - this is a link currently has a mouse pointer hovering over it/on it

* link - this is a link that has not been used, nor is a mouse pointer hovering over it

* visited - this is a link that has been used before, but has no mouse on it

* first-child - special style to an element that is the first child of another element

* lang - specifies a language for the specified element

Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:

#content a:link {color: #009900;}

#content a:visited {color: #999999;}

#content a:hover {color: #333333;}

#content a:focus {color: #333333;}

#content a:active {color: #009900;}

Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #content selector to match your division name.

Then for the links in a column you could use the following:

#column a:link {color: #009900;}

#column a:visited {color: #999999;}

#column a:hover {color: #333333;}

#column a:focus {color: #333333;}

#column a:active {color: #009900;}

Once again, this assumes the name of the column division, just change the name to match yours.

This same method can be accomplished by declaring a class instead of an id.

a.column:link {color: #009900;}

a.column:visited {color: #999999;}

a.column:hover {color: #333333;}

a.column:focus {color: #333333;}

a.column:active {color: #009900;}

Though in this case you will need to add a class to each link

<a class="column" href="" title="">some link text</a>

But, there is still yet an easier way

.column a:link {color: #009900;}

.column a:visited {color: #999999;}

.column a:hover {color: #333333;}

.column a:focus {color: #333333;}

.column a:active {color: #009900;}

Answer 2

well you have Pseudo-class:

In CSS, a pseudo-class is way of selecting certain parts of a HTML document based in principle not on the HTML document tree itself and its elements or on characteristics like name, attributes or contents, but on other phantom conditions like language encoding or the dynamic state of an element. The original pseudo-class defined dynamic states of an element that are entered and exited over time, or through user intervention. CSS2 expanded on this concept to include virtual conceptual document components or inferred portions of the document tree e.g. first-child. Pseudo-classes operate as if phantom classes were added to various elements.

and Pseudo-element:

In CSS, pseudo-elements are used to address sub-parts of elements. They allow you to set style on a part of an element's content beyond what is specified in the documents. In other words they allow logical elements to be defined which are not actually in the document element tree. Logical elements allow implied semantic structure to be addressed in CSS selectors.