Pseudo Classes/States

Submitted by Yorkiebar on Sunday, January 26, 2014 - 10:18.
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='http://sourcecodester.com'>Normal link to sourcecodester.com</a>
  38. 		<a href='http://sourcecodester.com' 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='http://www.sourcecodester.com/sites/all/themes/arras/logo.png' />Normal image from sourcecodester.com. Hover over it...</a>
  40. 	</body>
  41. </html>

Add new comment

About text formats
  • 37 views