iEntry 10th Anniversary CSS Snippets JavaScript Snippets

 
 





Pseudo-Classes

CSS has something "commands" that you can use to make the CSS code change when something happens. This is similar to JavaScript's events. In CSS, these are called pseudo-classes, and they allow you to do stuff like change the color an anchor element when the mouse cursor is hovering over it. Lets look at some of the pseudo-classes then we will use them to make a menu which will change based on in action with the mouse.

Active

This pseudo-class will activate when the element is active. For example, if you have an anchor element, when this element is clicked on, the element is then active, and the CSS code will be applied to that element.

Focus

An element because the focus of the current page, this pseudo-class will become active. An example of an element that is the focus of a page, is when you click on a text box.

Hover

As the name suggests, hover is active when your mouse touches, or hovers over, an element.

Link

In HTML, if you wanted to change links of a link that was visited you would use the link to change the color to what you wanted it to be. This is similar to what link does, you can change the style of an anchor tag after it has be clicked on.

Visited

As with the link class, the visited class has a similar attribute in HTML. The HTML equivalent of this class is the vlink attribute.

First-Child

The first-child pseudo-class, allows you to change style on the first element that is in your code. If you wanted only to make the first paragraph element bold, you would use first-child. In addition to making the style change the first time an element that is in the code, you can make the first element within elements change styles also. Here are some examples of this class. 

p:first-child {color: #0000FF}

This code would make the first paragraph element's text color become blue. 

p > em:first-child {color: rgb(0,0,255)}

The style above will change the first em element in every paragraph element. 

p:first-child em {color: blue;}

To change every emphasis element within the first paragraph element you would us this style sheet code.

Now that we have gone over the pseudo-classes, lets make a menu that will have the background change, when hovered over. 

<html>
 <head>
  <style>
   a{
    background-color: #FFB6B8;
    color: #D65365;
    border: 1px soild #FFB6B8;
    padding:5px 5px;
    text-decoration: none;
   }

   a:hover{
    background-color: #D65365;
    color:  #FFB6B8;
    border: 1px soild #D65365;
    padding:5px 5px;
    text-decoration: none;
   }

   li {display: inline;}

  </style>
 </head>
<body>


<li><a href="#">Test Link</a>&tl;/li>
<li><a href="#">Test Link 2</a>&tl;/li>

</body>
</html>

First thing we do in the style sheet is set up the look and feel for the anchor tags. We set the background-color, color, border, and padding values that we want to have. We have also set the text-decoration to not show the underline in the link. If this was in the body of the web site, it would most likely not be the best idea to have the link not underline, this may cause confusion to some users.

After setting the anchor element values, we then call the hover pseudo-class for all anchor elements. When the user's mouse touches the anchor element in our menus, then the style will change and the new settings will be applied. In this example we are just inverting the colors on the menu, so that the text color becomes the background color and vise-versa. Since we are not using tables in our HTML code, we have made the li elements inline with each other. This will cause the menu to be horizontal rather than vertical.