CSS PSEUDO CLASSES


CSS Pseudo-classes are used to specify a special state of the element for example hover, active, focus, etc.

Here's the syntax:


selector:pseudo-class {
  property: value;
}

Pseudo Classes for anchor tags



Unvisited link:

a:link {
  color: #73ff00;
}
Live Demo!


Visited Link:

a:visited {
  color: #0059ff;
}
Live Demo!


Hover over link:

a:hover {
  color: #ff59ff;
}
Live Demo!


Selected Link:

a:active {
  color: #4949ff;
}
Live Demo!


:first-child

This pseudo class is used to target the first child of another element.

In the following example the first paragraph element in the div with the class first-child-demo is targeted.


.first-child-demo p:first-child {
  color: red;
}


Here's the HTML:


<div class="first-child-demo">
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</div>
Live Demo!


Output:

This is a paragraph.

This is a paragraph.

This is a paragraph.



List of All Pseudo Classes

SELECTOR EXAMPLE DESCRIPTION
:active a:active Used to select the active link style
:checked Input:checked Will select the checked checkbox input
:disabled Input:disabled this will target the disabled input
:empty span:empty This will select span with no children
:enabled Input:enabled This will select all enabled input elements
:first-child p:first-child This will select the first paragraph element inside the parent
:first-of-type p:first-of-type This will select all paragraph elements that are the first in its parent.
:focus Input:focus This will select the focus state of an input
:hover div:hover This will select the hover state of the div
:in-range Input:in-range This will select input elements with values in a range
:invalid Input:invalid This will select inputs with invalid value
:lang(language) p:lang(en) this will select all paragraph elements with land attribute starting with “en”
:last-child p:last-child This will select the last child paragraph element in its parent
:last-of-type p:last-of-type This will select all paragraph elements that are the last in its parent.
:link a:link This will select unvisited links
:not(selector) :not(span) This will select all elements that are not a span
:nth-child(n) p:nth-child(5) This will select all paragraph element that is the 5th child of its parent
:nth-last-child(n) p:nth-last-child(5) Selects paragraph element that is 5th child of its parent counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(5) This will select all paragraph elements that are 5th child of its parent starting to count from the last paragraph element
:nth-of-type(n) p:nth-of-type(5) Selects all paragraph elements that are the 5th child of its parent
:only-of-type p:only-of-type Will select paragraph element that is the only paragraph element in its parent.
:only-child p:only-child Selects paragraph element that is the only child of its parent.
:optional input:optional This will select input elements with no required attribute
:out-of-range input:out-of-range This will select all input elements outside of a set range.
:read-only input:read-only This will select input elements with readonly attribute
:read-write input:read-write This will select input elements with no readonly attribute
:required input:required This will select input elements with a required attribute
:root root This will select the root element of the document
:target #link:target This will select the currently active #link element
:valid input:valid This selects all input elements with valid values
:visited a:visited This selects all the visited links