A.: Pseudo-Classes – Pseudo-Classes are specified a special state of the element to be selected. In other word, Pseudo-classes are target elements that match certain criteria or state.
Features
Pseudo class is signified by a single colon (:) followed by the name of a Pseudo class.
Example
1.: hover – Style an element when a user mouses over it.
2.: visited,: link – Style visited and unvisited links differently
3.: focus – Style an element when an element has received focus, either from the user selecting it with the use of a keyboard.
List of Pseudo-classes
:active, :checked, :default, :dir(), :disabled, :empty, :enabled, :first, :first-child, :first-of-type, :fullscreen, :focus, :hover, :indeterminate, :in-range, :invalid, :lang(), :last-child, :last-of-type, :left, :link, :not(), :nth-child(), :nth-last-child(), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :optional, :out-of-range, :read-only, :read-write, :required, :right, :root, :scope, :target, :valid, :visited
B.:: Pseudo-elements – Pseudo-elements allow you to style certain parts of a document.
Features
* Pseudo-elements is signified by a two colon (::) followed by the name of a Pseudo class.
* IE8 will not support the Pseudo-elements.
* If your browser supports two colon Pseudo-elements that also support the single colon Pseudo-classes.
Example
1. ::first-letter – Style the first letter of a element.
2.::first-line – Style the first line of an element.
List of Pseudo-elements
::after, ::before, ::first-letter, ::first-line, ::selection, ::backdrop
Remember: Pseudo class is signified by a single colon (:)followed by the name of a Pseudo class and Pseudo elements is signified by a two colon (::) followed by the name of a Pseudo class.
Leave a Reply