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.

css pseudo class selectors

:link - Adds style to an unvisited hyperlinks.

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

:focus - Signifies an element that currently has focus.

:active - Adds style to an activated link.

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

You can add calss names and customized various links.

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


CSS pseudo class selectors

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.

CSS pseudo elements


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

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


pseudo first line


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

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


first letter

:before and :after

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

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


pseudo element selectors