Google.com | Gmail.com | Youtube.com | Facebook.com | Twitter.com | EKantipur.com | English Movies
It's a Personal Blog | CSS Selectors and Inheritance- Part 3

It's a Personal Blog

just sharing what I am learning!

CSS Selectors and Inheritance- Part 3

5.Pseudo-class Selectors

HTML

<h1>Pseudo-class Selectors</h1>

<p>

<a href="http://www.yogeshbasnet.com.np">a:link -- unvisited link</a>

<a href="http://www.yogeshbasnet.com.np">a:visited -- visited link</a>

<a href="http://www.yogeshbasnet.com.np">a:hover -- mouse hovering</a>

<a href="http://www.yogeshbasnet.com.np">a:active -- visiting a link</a>

</p>

CSS

a { padding:3px 10px; margin:20px 10px; text-decoration:none;display:block; width:260px;

     border-left:1px solid dimgray; border-right:2px solid black;

     border-top:1px solid dimgray; border-bottom:2px solid black; }

a:link { color:black; background-color:white; }

a:visited { color:gray; background-color:white; }

a:hover { color:white; background-color:green; }

a:active, a:focus { color:green; background-color:gold; }

 

Explanation:

If you want to style a hyperlink depending on whether it is not visited, visited, being hovered over by the mouse, or in the process of being visited, select hyperlinks based on their state:

- Use a:link to select a hyperlink when it has not been visited.

- Use a:visited to select a hyperlink when it has been visited.

- Use a:hover to select a hyperlink when the mouse hovers over it.

- Use a:focus to select a hyperlink when it receives focus in other browsers.

- Use a:active to select a hyperlink when it receives focus in IE

 

 

6.Subclass Selector

HTML

<h1>Subclass Selector</h1>

<div>

<p class="button square">Square</p>

<p class="button rounded">Rounded</p>

<p class="button go">Go</p>

</div>

 

CSS

*.button{ width:175px;padding:3px 10px;margin:20px 0; text-align:center;font-weight:bold; margin-left:50px; line-height:normal; }

*.button.square{ color:darkblue; background-color:gold;border-left:1px solid dimgray; border-right:2px solid black;border-top:1px solid dimgray; border-bottom:2px solid black; }

*.button.rounded{ color:darkblue;background-color:white;line-height:45px; margin- top:30px;background:url("oval.gif") no-repeat center center; }

*.button.go{ background-color:white;line-height:26px;text-indent:-9999px; font-size:10px;background: url("go.jpg") no-repeat center center; }

 

Explanation:

If you want a class of elements to be styled with common rules, you can assign classes to elements in your HTML code using the class attribute. A class attribute can contain an unlimited number of space-delimited classes. To select all elements assigned to the base class, use the universal selector followed by the dot operator, followed by the name of the class. To select all elements assigned to a base class, use the universal selector followed by the dot operator, followed by the name of the base class, followed by the dot operator, followed by the name of the subclass.

Loading