Pseudo Classes / Elements

Pseudo class selectors consist of the normal selector followed by a colon : and the desired pseudo class selector.

 

Syntax:

selector:pseudo-class { property: value; }

 

Example:

a:hover { color: #FF00FF; }

 

This will style <a> link elements to be coloured red upon mouse pointer hover.

 

 

CSS classes can also be used with pseudo-classes:

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

 

Common Pseudo Class Selectors:

Property Description Example
:link Styles unvisited links a:link
:visited Styles visited links a:visited
:hover Styles elements upon mouse over a:hover
:active Styles active element a:active
:first-child Styles first child of the specified selector li:first-child
:last-child Styles last child of the specified selector li:last-child
:first-line Styles first line of the specified selector p:first-line
:first-letter Styles first letter of the specified selector p:first-letter
:before Styles content before the specified selector p:before
:after Styles content after the specified selector p:after
:lang(language) Styles all elements with specified lang attribute p:lang(en)

 

Example:

Save & refresh browser:

Leave a Reply