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)



<!DOCTYPE html>
        <title>My Document Title</title>
        <style type="text/css">
			a:link { color:#F0F; }
			a:visited { color:#00F; }
			a:hover { color:green; }
			a:active { color:red; }
			li:first-child { font-size:2em; }
			li:last-child { border-bottom:dashed 2px blue; }
			p:first-line { color:#FF0; background-color:black;}
			p:first-letter {color:#F00; font-size:2em; }
			p:before { content:"Important! "; font-weight:bold; background-color:yellow; color:red; }
			p:after { content:" Thanks for reading."; color:blue; font-style:italic; }
			p:lang(fr) {color:white; border:solid 1px red; background-color:#660;}
    	<a href="" target="_blank"></a>
    	<a href="" target="_blank"></a>
			<li>1st RULE: You do not talk about FIGHT CLUB.</li>
			<li>2nd RULE: You DO NOT talk about FIGHT CLUB.</li>
			<li>3rd RULE: If someone says "stop" or goes limp, taps out the fight is over.</li>
		<p>In the beginning there was the Plan<br>
			And then came the Assumptions<br>
			And the Assumptions were without form<br>
			And the Plan was without substance</p>
			<p lang="fr">And darkness was upon<br>the face of the workers!</p>

Save & refresh browser:

Leave a Reply