Skip to content

Instantly share code, notes, and snippets.

@sudheesh001

sudheesh001/Working method.md

Created December 1, 2013 18:35
Show Gist options
  • Save sudheesh001/7739002 to your computer and use it in GitHub Desktop.
Save sudheesh001/7739002 to your computer and use it in GitHub Desktop.
Download ZIP
Easy Understanding of Pseudo-classes selectors in CSS3
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
</body>
</html>
Raw
style1.css
a.homepage:link, a.homepage:visited {
padding: 1px 10px 1px 10px;
color: #fff;
background: #555;
border-radius: 3px;
border: 1px outset rgba(50,50,50,.5);
font-family: georgia, serif;
font-size: 14px;
font-style: italic;
text-decoration: none;
}
a.homepage:hover, a.homepage:focus, a.homepage:active {
background-color: #666;
}
Raw
Working method.md

Explanation to the working.

a.homepage:link, a.homepage:visited {
   ...
   }

This is basically setting the CSS rule for an anchor (link) in the class homepage in two stages,

  1. When the link is present as an unvisited link
  2. When the link has been visited.
a.homepage:hover, a.homepage:focus, a.homepage:active{
  ...
}

This sets the CSS rule when hovering or focusing or when the link is active

The CSS rule i.e.

  padding: 1px 10px 1px 10px; 
  //The CSS padding properties define the space between the element border and the element content.
  color: #fff;
  // Sets the color to the HEX value of #fff
  background: #555;
  // Background color #555
  border-radius: 3px;
  // Self explanatory.
  border: 1px outset rgba(50,50,50,.5);
  // the border of thickness 1px is of color given by RGBA which stands for Red, Green, Blue, Alpha
  font-family: georgia, serif;
  // The font that is used.
  font-size: 14px;
  // Size of the font.
  font-style: italic;
  // Style of the font.
  text-decoration: none;
  // Self explanatory.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment