<< .. Go to : : Home : : Exercise 10 : : Demo 10A : : Demo 10B : : Demo 10C : : Demo 10D : : Demo 10E : : All Class Demos .. >>

Exercise 10 Demo: Part A : HTML5 & CSS3


When we learned the CSS for styling the anchor tag or "a" tag, we added styles to it's psuedo-classes. CSS pseudo-classes are used to add special effects to some selectors. The ones we used included:


When they are used in styling they look like this with the a in front of them with no space between the words:
a:link, a:visited, a:active, a:hover, a:focus.

a:focus is the state when the link is selected and there is a dotted outline around it. You can use styles to eliminate the dotted border. Although it does draw your "focus" to what is selected.

CSS3 Common Pseudo-Classes


A common use of these is when you have added a border on one side of your links and want to make sure the first one - or last one - doesn't have one. You could style it like this:

     #nav li:first-child a, #nav li:first-child a:hover  {border-left:none;}

Here is an example of navigation with no CSS3 psuedo class:

Same navigation with the extra pseudo class used to eliminate the left border on the first navigation link. It looks very nice with no left border on the first link, and is simple to do.

Common Pseudo-Elements


Use these to add emphasis to the opening line of text, or the first letter in a paragraph.

This is a paragraph using Pseudo-Elements. It is bigger and bolder.

The first letter and the first line have more emphasis than the rest of the text. Use this to draw your eye to items that you want to stand out and yet they need to flow with the rest of the text. I added them to a div I ID'd as "special". You could name it anything or add these classes to the header, aside, or section elements.

#special p:first-child {font-weight: bold;}
#special p:first-child:first-letter {font-size: 40px; margin-top: 20px;}

© Claudia Faulk. Created in 2012.