Pseudo Classes / Elements

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



selector:pseudo-class { property: value; }



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)



Save & refresh browser:

Leave a Reply