Pseudo Classes/States

Submitted by: 
Language: 

Introduction:
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.

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

Example:

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

States:
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 element.
first-line - Selects the first line of every element.
first-child - Selects every elements that is the first child of its parent.
before - Insert content before every element.
after - Insert content after every element.
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. }
  16.  
  17. img {
  18. width: 300px;
  19. // Sets image width back to normal when it is no longer hovered over.
  20. }
  21.  
  22. img:hover {
  23. width: 600px;
  24. height: 100px;
  25. // Activated for all images when it is hovered over.
  26. }
  27.  
  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='<a href="http://sourcecodester.com'>Normal" rel="nofollow">http://sourcecodester.com'>Normal</a> link to sourcecodester.com</a>
  38. <a href='<a href="http://sourcecodester.com'" rel="nofollow">http://sourcecodester.com'</a> class='notThis'>Normal link to sourcecodester.com 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='<a href="https://www.sourcecodester.com/sites/all/themes/arras/logo.png'">https://www.sourcecodester.com/sites/all/themes/arras/logo.png'</a> />Normal image from sourcecodester.com. Hover over it...</a>
  40. </body>
  41. </html>

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.