Skip to main content

Pseudo Classes/States

This is the ninth part in my CSS Styling tutorials, in which I will be covering Pseudo states/classes.

What Is a Pseudo State?
A pseudo state or class is an event which has been triggered by the user, such as moving the mouse to hover over the elements in question, for example.

Why States?
States are important for a professional looking website. Each state can set different properties on different elements for the user to easily tell what they have/are done/doing.

States can be used for any element, class or id as long as it makes sense. For example; you can use hover on any element, while you could only really use visited on links.

{element, id or class}:{state} {
//CSS Styling properties.


  1. a:hover {
  2. color: blue;
  3. }

link - An unvisited link.
visited - A link the user has already visited.
hover - When the user is hovering their mouse over the element.
active - The active link.
focus - Selects in the input element which has focus.
first-letter - Selects the first letter of every

first-line - Selects the first line of every

first-child - Selects every

elements that is the first child of its parent.
before - Insert content before every

after - Insert content after every

lang(language) - Selects every

element with a lang attribute value starting with "it".
not(class, element or id) - Selects all the elements, classes or ids pre-mentioned (before the not) which do not match the classes, elements or ids within the not class.

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. a:hover {
  5. color: orange;
  6. width: 300px;
  7. height: 100px;
  8. // Activated for all links when the mouse is hovering over it''s area.
  9. }
  10. a:visited {
  11. color: blue;
  12. width: 300px;
  13. height: 100px;
  14. // Activated for all links when it is or has been visited by the user.
  15. }
  17. img {
  18. width: 300px;
  19. // Sets image width back to normal when it is no longer hovered over.
  20. }
  22. img:hover {
  23. width: 600px;
  24. height: 100px;
  25. // Activated for all images when it is hovered over.
  26. }
  28. a:not(.notThis) {
  29. color: green;
  30. width: 300px;
  31. height: 100px;
  32. // All links but the ones with the class notThis.
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <a href=''>Normal link to</a>
  38. <a href='' class='notThis'>Normal link to except this one won't take in to account the a:not(.notThis) css styling since it has the .notThis class.</a>
  39. <img src='' />Normal image from Hover over it...</a>
  40. </body>
  41. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.