Pseudo-Classes
What are pseudo-classes?
These are a group of selectors which can apply to an HTML element when it is in a particular state, or when a certain condition is met.How to use pseudo-classes
Pseudo-classes can be applied to elements in CSS using the following code;valid-element:pseudo-class { property: value; }
valid-element - The name of a valid element to apply the given pseudo-class to. Some pseudo-classes will only work with certain elements.
pseudo-class - The name of a pseudo-class. See below for what these are.
link
This pseudo-class only applies to links. It is applied to links which have not yet been visited. Read more information on formatting links with CSS.A:link { color: #00FF00; }
visited
This pseudo-class only applies to links. It is applied to links which have been visited. Read more information on formatting links with CSS.A:visited { color: #0000FF; }
hover
This pseudo-class can apply to any element. It applies when the mouse is held over the element. You can read more about using hover to format links.myClass:hover { background-color: #000000; }
active
This pseudo-class can apply to any element. It applies when the element is activated; for example, the time between clicking the mouse down on it, and releasing the mouse button. You can read more about using active to format links.myClass:active { background-color: #000000; }
focus
This pseudo-class can apply to any element. It applies when the element has user focus; for example, a text box while text is being entered.myClass:focus { border-color: #FF0000; }
first-child
This pseudo-class can apply to any element. It applies when the element is the first child of another an element; for example the first image within a containing element.img:first-child { border: 2px solid #000000; }
lang
This pseudo-class can apply to any element. It applies when the element is written in the specified language.myClass:lang(language) { font-weight: bold; }
language - The language code of the language to apply the rule to.
This is useful if you have sections of your site written in different languages, and want to style each one differently. In the HTML for each section you will need to write;
<tagname lang="language">
tagname - The HTML tag.
language - The language code.