Expertrating - CSS Tutorial, Pseudo Classes and Pseudo Elements

Home > Courses, Tutorials & eBooks > CSS Tutorial > Pseudo Classes and Pseudo elements

CSS Tutorial - Pseudo Classes and Pseudo Elements

Page 1 of 2

Overview

In this chapter you will learn

What are pseudo classes?
Adding special effects with pseudo classes and pseudo elements
Determining the style rules for a sub part of an element's content

Pseudo classes are added to define style rules for selectors. They add special effects to certain selectors. Pseudo classes are automatically recognized by CSS supporting browsers. Pseudo elements are pseudo classes that allow you to define the style rules for a subpart of an element's content. Pseudo classes and pseudo elements are always preceded by a colon. Most pseudo classes and elements also require to be explicitly associated with only some specific tags, since they don't make sense when applied to other elements.

Syntax

Selector : pseudo-class { property : value;}

With pseudo classes you have the ability to add effects to your anchor tags, otherwise known as 'hyperlinks'.

Some most common pseudo classes used for styling hyperlinks are :

: Link

Link pseudo-class specifies the style rule for unvisited links, i.e. the link which has not yet been clicked or the mouse pointer has not passed over it.

Example

A: link { color : green ;}

:Visited

Visited pseudo-class specifies the style rule for visited links, i.e. the link which has already been clicked. Once the user has visited the link, its color is usually changed, so that the user recognizes which links are still unvisited.

Example

A : visited { color : red font-weight : bold ;}

:Hover

Hover pseudo-class specifies the style rule for element that is presently under the mouse cursor. The cursor is said to hover over the link.

Example

A : hover { color : yellow;}

:Active

Active pseudo-class specifies the style rule for element that is presently under the focus, i.e. the link has been currently selected.

Example

A : active { color : black font-size : 18pt;}

Note

The order in which these pseudo-classes should be used is a: link, a: visited, a: hover and then a: active, so as their definition is effective.

:First-Child

It specifies the style rule to the first element which is contained inside a parent element.

Example

p : first-child { color : gray;}

:Lang

It specifies the style rule to the contents of an element that has been written in a foreign language. The language code is to be declared before enclosing the language code within the parentheses.

Example

p : lang ( fr ) { color : purple;}

This is not well supported by browsers.

Pseudo-elements are very similar to pseudo-classes but also define contents within the document. Pseudo-elements determine the style rules for a sub-part of an element's content.

Syntax

Selector : pseudo-element { property : value}

Some of the pseudo-elements are defined below.

:First-Letter

It allows you to add styles to the first-letter of an element. This pseudo-element is mostly used with paragraph elements to enhance the appearance of first-letter in the paragraph.

Syntax

p : first-letter { color -red; font-size:18pt;}

First letter is red.

:First-Line

It allows you to add styles to the first-line of an element. This pseudo-element is mostly used with paragraph elements to enhance the appearance of first-line in the paragraph.

Example

p : first-line { color-yellow; font-size:18pt;}

In this example, only the first line has the font color yellow. Rest of the paragraph follows the blue color. Also, the font-size of the first line is 18 pts, whereas the rest of the lines have font-size as 12 pts.

:Before

It allows you to add some content before an element. This pseudo-element is used in conjunction with the content property. You can also specify the styles to the content.

Example

p : before { content : "SURPRISE !!!";}

SURPRISE !!! You have won a lottery ticket.

This is not supported by certain web browsers.

:After

It allows you to add some content after an element. This pseudo-element is also used in conjunction with the content property. You can specify the styles to the content.

Example

after { content : "BETTER LUCK NEXT TIME";}
This is not supported by certain web browsers.

Review Questions

Fill in the Blanks

Pseudo-classes and pseudo-elements are always preceded by a _____.
_____ pseudo-class specifies the style rule for visited links.
_____ pseudo-element add styles to the first line of an element.
: before a pseudo element is used in conjunction with _____ element.

Solutions

Colon
:visited
:First-line
content

State Whether True Or False

Pseudo elements and classes can be applied in conjunction with any tag.
The :Link pseudo-class can never be used before :hover pseudo-class.
:Lang pseudo-class specifies the style rule to the contents of an element that has been written in a foreign language.
H1 : first-letter{ color-purple}, will set the first character of the heading of purple color.

Solutions

False
False
True
True

Exercise

Apply different pseudo-classes and pseudo-elements within a document.

Solution

View Code View Runtime

What's Next

The next chapter will tell you about the basic concepts of W3 standards and its versions. The chapter will further elucidate about validation of a style.

Hop over to the next chapter to get a close-up on W3 standards.

ExpertRating CSS Certification - Get Certified Now!!