Pseudo class Selectors - CSS selectors

Dynamic Pseudo Classes

Pseudo Classes allow the designer the freedom to control how the element should appear under different conditions. Using dynamic pseudo classes, it is possible to customize those styles. Pseudo class selectors start with a colon and are usually added immediately after a type selector with no additional whitespace.

:link - Adds style to an unvisited hyperlinks.

a:link {
  color: #FF0066;
}

:visited - Styles for links that have already been visited.

a:visited {
  color: #FF0066;
}

:focus - Signifies an element that currently has focus.

a:focus {
  color: #FF0066;
}

:active - Adds style to an activated link.

a:active {
  color: #FF0066;
}

:hover - Adds style to an element when you mouse over it.

a:active {
  hover: #FF0066;
}

You can add calss names and customized various links.

a.linkColor:link {
  color: #FF0066;
}

The following HTML page implement different pseudo-class-selectors to given link:

<html>
<head>
  <style type="text/css">
    a.linkColor:link {
      font-size: 12pt; text-decoration: none; color:#084B8A;
    }
    a.linkColor:visited {
      font-size: 12pt; text-decoration: none; color:#084B8A;
    }
    a.linkColor:active {
      font-size: 12pt; text-decoration: none; color:#084B8A;
    }
    a.linkColor:hover {
      font-size: 12pt; text-decoration: underline; color:#FF8000;
    }
  </style>
</head>
<body>
  Pseudo-class Selectors <br>
  <a href="default.html" class="linkColor" >Home</a> <br>
</body>
</html>

output

Pseudo-element Selectors

CSS pseudo-elements selectors enable you to assign properties to the areas of a document that are not delimited by standard elements.

:first-line

The :first-line pseudo-element enables you to dynamically style the first line of text as displayed in the browser.

p:first-line {
  text-decoration: underline;
}

The above code style the first line of the paragraph with underline.

output

:first-letter

The :first-letter pseudo-element enables you to style the first letter of an element.

p:first-letter {
  font-size: 200%;
  font-weight: bold;
}

The above code style the first letter of the paragraph with decorated font style.

output

:before and :after

The :before and :after pseudo elements enable you to add additional text to the before or after to an element.

p:before {
  content: "START :";
}

p:after {
  content: ": END";
}

For the following example you can understand how to implement Pseudo Element Selectors.

<html>
<head>
<title>Pseudo-class Selectors</title>
  <style type="text/css">
    p:first-line {
      text-decoration: underline;
    }
    p:first-letter {
      font-size: 200%;
      font-weight: bold;
    }
    p:before {
      content: "START :";
    }
    p:after {
      content: ": END";
    }
  </style>
</head>
<body>
  <p> This paragraph displays Pseudo-element Selectors <br>
  They are :first-ine,:first-letter,:before and :after <br>
  Hope you understand Pseudo-element from this example
  </p>
</body>
</html>

output