CSS Pseudo-class

Prev
Next

CSS Pseudo classes

CSS Pseudo-classes are keywords for the selectors that set attributes when the selector is in an extra special state.
Basically, pseudo classes set the style of an element when the element is in a particular special state.

The below Image contains the list of most important Selectors with brief descriptions-

css pseudo class different types of properties

For Example –

  1. Suppose, you want to change the color of a link(selector or element) to Red when you mouse over it, you can simply use pseudo class for hover like –
link:hover {
  color:red;
}
Here, link is the "Selector" and "hover" is the pseudo class.

Example:
Just mouse over the below text and it will turn to red color.

Hover over me to change the color to Red & Background color to Yellow

  1. Similarly, to change the color of button only when the user clicks on it, you can use the pseudo class depending on what you want to achieve.
  2. Now, if you want to change the element style when it gets focused, you can use the Selector class :focus or :focus:within etc

There are lots of other examples of pseudo classes in CSS which we are going to discuss here.

The Syntax of pseudo-class
selector:pseudo-class{
   property1:value1;
   property2:value2;
   …
   …
   property-n:value-n;
}

The important pseudo classes in CSS are –

:link

:active

:focus-within

:last-child

:visited

:any-link

:target

:lang

:hover

:focus

:first-child

:checked

:link pseudo-class

Let’s say, you want to set a default color of the link in your website to Gray, you can simply use a:link pseudo class for this.

CSS link pseudo-class​

Example of CSS :link pseudo-class​

a:link{
    color:gray;
    }
Run the Code

:visited pseudo-class

The :visited pseudo class tells the browser to set a particular property once the user visits the link.

For Example–

If you want to change the color of the link to Red, once the user clicks on a particular link, you can use use like below –

After visiting the link, the link color will be red

Example of :visited pseudo-class

a:visited {
 color: red;
}
Run the Code

:hover pseudo-class

The :hover pseudo class tells the browser to set a particular property once the user hovers over the link.

For Example –

If you want to change the color of the link to orange, once the user clicks on a particular link, you can use use like below –

Example of :hover pseudo-class

.buttonval {
    background-color: aqua;
    color: black;
    padding:10px 20px;
}
.buttonval:hover {
      background-color:tomato;
}
Run the Code

:active pseudo-class

Once the user clicks on a link, the time which is in either microsecond or the nanoseconds as soon as the link is clicked is called the active state of that link.

To change the color of the text to Red and background-color to Yellow during the active state, you can code as below –

Example

a:active {
color: green;
}
Run the Code

:any-link pseudo-class

To set the property of any link to a particular value, simply use :any-link pseudo-class property of CSS.

Example of :any-link pseudo-class

:any-link{
 color:gray;
 }
Run the Code

:target pseudo-class

The :target pseudo-class sets the styles to the anchor link elements.

An internal link to the same page with some different position is called anchor links.

An Internal link within the same page followed by # and the anchor name to that particular element is the :target selector.

CSS target pseudo class property

Example for :target pseudo-class

:target {
     background-color: Gold;
     }
Run the Code

:first-child pseudo-class

This selects the first child of a parent element and applied a style on it.

Syntax:
:first-child

Example OF :first-child pseudo-class

p:first-child {
  text-align:center;
  border: 3px solid aqua;
}
Run the Code

:last-child pseudo-class

This selects the Last child of a parent element and applied a style on it.

Syntax:
:last-child

CSS class last-child property

Example for CSS :last-child pseudo-class

li:last-child {
     background-color: blue;
     }
Run the Code

:focus pseudo-class

It is used to change the color of focused links by using the focus pseudo-class. We can give any color name as value.

Example

textarea:focus {
  color: aqua;
  background-color:black;
  padding:100px 70px;
}
Run the Code

:focus-within pseudo-class

The :focus-within property of pseudo-class allows the users to focus(click) within a particular area and the style will be applied within the selected area.

Input field color changes to gold when we click on it

First Name:

Last Name:

Example of :focus-within pseudo-class

input:focus-within {
     background: gold;
     color: black;
     }
Run the Code

:lang pseudo-class

The :lang pseudo class property styles all the selectors which matches the lang attribute.

Example

p:lang(de) { 
 background: gold;
}
Run the Code

:checked pseudo-class

The :checked property of pseudo-class selects those input elements which are either –

  • radio button
  • checkbox
  • options

Once, this selects any of these type of input elements, it can apply a particular style to these selected elements.

Select Gender

Male
Female
Other

Example of CSS :checked pseudo-class

input:checked {
    box-shadow: 0px 0px 4px 4px skyblue;
    width:35px; }
Run the Code

:default

:default will select all the default elements of the form. In the example below, it will select the default elements which are radio button ‘Male’ and checkbox with value as ‘a’.

Example

input:default {
    box-shadow: 0.5px 0px 2px 2px green;
}

input:default:hover {
    width: 45px;
}
Run the Code

:disabled

:disabled will select all the <input> elements which are disabled and any user cannot edit them. In the example below, the input type ‘text’ user is disabled.

Example

input[type="text"]:disabled {
    color: #fff;
    background: gray;
}
Run the Code

:empty

The pseudo-class :empty selects all the elements that has no children at all. The empty elements should not even contain any content like text or white-spaces.

Example

div {
    width: 120px;
    height: 50px;
    margin: 5px;
    padding-bottom: 2px;
    text-align: center;
    background-color: yellow;
    border: 4px solid blue;
}

div:empty {
    background-color: orchid;
    border: 4px dashed green;
}
Run the Code

:enabled

:enabled Selector will select all the <input> elements which are enabled for editing (not marked as disabled) and a user can edit them.

Example

input[type="text"]:disabled {
    color: #fff;
    background: gray;
}

input:enabled {
    color: lawngreen;
    background: orange;
}
Run the Code

:first-of-type

The selector :first-of-type selects only the first element of a particular type among its sibling elements.

In the example below, p:first-of-type will select only the first paragraph from all the group of paragraphs which are siblings with respect to each other.

Similarly, div:first-of-type selects only the first div from all the siblings div type.

Example

p:first-of-type,
div:first-of-type {
    background: tomato;
    border: 2px dotted green;
}
Run the Code

:in-range

The :in-range selector selects those <input> elements whose value falls within the range which is specified by that element.

In the example below, the range of last element is 1 to 5 so it will select this element and if the user writes a value between 1 to 5, then the background color of this input will turn to hex code #C4F7A2.

Example

input {
    border: 1px solid black;
    text-align: center;
}

input:in-range {
    background-color: #C4F7A2;
}
Run the Code

:invalid

This selector selects all those <input> elements that contains an invalid value and applies style to it.

Here, if you give an invalid value of email, then the background-color will turn to orange and the border will be 2px solid indianred.

Example

input {
    border: 1px solid black;
    text-align: center;
}

input:in-range {
    background-color: #C4F7A2;
}

input:invalid {
    background-color: orange;
    border: 2px solid indianred;
}
Run the Code

:last-of-type

The selector :last-of-type selects only the first element of a particular type among its sibling elements.

Here, p:last-of-type will select only the last paragraph from all the group of paragraphs which are siblings with respect to each other.

Similarly, div:last-of-type selects only the last div from all the siblings div type.

Example

div {
    width: 80%;
    height: auto;
    background-color: aqua;
    border: 1px solid green;
    padding: 2px;
}

p:last-of-type,
div:last-of-type {
    background: orange;
    border: 4px dotted blue;
    margin: 5px;
    padding: 2px;
}
Run the Code

:not()

The selector :not() selects all the elements that is not a particular element. It is like a negation pseudo class as it helps in selecting particular elements.

Here, :not(div) will select all those elements which are not a div.

Example

div {
    color: blue;
}

:not(div) {
    color: green;
}
Run the Code

:nth-child

The :nth-child(position-value) selects all the elements which is determined by the ‘position-value’ among the group of siblings under a parent.

Example

div:nth-child(2n) {
    width: 80%;
    height: auto;
    background-color: aqua;
    border: 1px solid green;
    padding: 2px;
}

p:nth-child(2n+1) {
    background: orange;
    border: 4px dotted blue;
    margin: 5px;
    padding: 2px;
}
Run the Code

:nth-last-child

The :nth-last-child(position-value) selects all the elements which is determined by the ‘position-value’ among the group of siblings under their parent while the user starts counting backwards from the last child

Example

div:nth-last-child(2n) {
    width: 80%;
    height: auto;
    background-color: aqua;
    border: 1px solid green;
    padding: 2px;
}

p:nth-last-child(2n+1) {
    background: orange;
    border: 4px dotted blue;
    margin: 5px;
    padding: 2px;
}
Run the Code

:nth-last-of-type

The :nth-last-of-type(position-value) selector selects all those elements which are of a particular type and are determined by their ‘position-value’ among all the siblings under their parent while the user starts counting from the last child.

Example

div:nth-last-of-type(2n) {
    width: 80%;
    height: auto;
    background-color: aqua;
    border: 1px solid green;
    padding: 2px;
}

div:nth-last-of-type(2n+1) {
    width: 80%;
    height: auto;
    background-color: blue;
    border: 1px solid tomato
    padding: 2px;
}
Run the Code

:nth-of-type

The :nth-of-type(position-value) selector selects all those elements which are of a particular type and are determined by their ‘position-value’ among all the siblings under their parent.

Example

div:nth-of-type(2n) {
    width: 80%;
    height: auto;
    background-color: aqua;
    border: 1px solid green;
    padding: 2px;
}
div:nth-of-type(2n+1) {
    width: 80%;
    height: auto;
    background-color: blue;
    border: 1px solid tomato;
    padding: 2px;
}
Run the Code

:only-child

As the name suggests, this selects all those elements which are the only child under their respective parent.

In short, those elements does not have any siblings.

Example

p:only-child {
    color: #fff;
    background: #000;
    font-style: italic;
}
Run the Code

:only-of-type

If you wish to select all the elements which are the only child of a particular type under their parent, then you can use this :only-of-type selector.

You should not that all those elements must not have any siblings and must be of same type.

Example

p:only-of-type {
    color: red;
    background: yellow;
    font-style: italic;
}
Run the Code

:optional

:optional selects <input>, <textarea> or <select> elements whose values are optional. In short, those elements are not defined with “required” attribute.

Example

input:optional {
    background-color: #F7DED7;
    border: 2px solid red;
}
Run the Code

:out-of-range

The :out-of-range selector selects those <input> elements whose value does not fall within the range which is specified by that element.

Here, the range of last element is 1 to 5 so if the user provides a value which is not in the range of 1 to 5, then the background color will turn to hex code #F7DED7 and the border will have a value of 2px solid red.

Example

input:in-range {
    background-color: #C4F7A2;
    border: 1px solid green;
}
Run the Code

:read-only

The :read-only selector selects all the <input> fields that are marked as “readonly”.

The “readonly” tags are non-editable fields.

Example

input:read-only {
    background-color: lightgray;
    border: 2px solid pink;
}

/* For Firefox */
input:-moz-read-only {
    background-color: lightgray;
    border: 2px solid pink;
}
Run the Code

:read-write

The :read-write selector selects all the <input> fields that are editable fields.

Example

input:read-write {
    background-color: darkorange;
    border: 4px solid #000;
}

/* For Firefox */
input:-moz-read-write {
    background-color: darkorange;
    border: 4px solid #000;
}
Run the Code

:required

This selector selects all the <input> fields that are mandatory fields.

The user must write a value for all the fields which are marked with “required” attribute.

Example

input:required {
    background-color: #fff;
    border: 4px solid #000;
    color: darkgreen;
    font-size: 18px;
}
Run the Code

:root

The root element of the html document is the <html> tag itself so the :root Pseudo class will select the root element of the document itself.

Example

:root {
    background-color: #000;
    color: #fff;
    margin: 4px 0 0 0;
    padding: 0;
    border: 2px solid #fff;
}
Run the Code

:valid

If you wish to style all those <input> or <form> elements that contains a valid value when typed by the user, then you can use the :valid selector.

Example

input:valid {
    background-color: lawngreen;
    border: 2px solid blue;
}
Run the Code

List of all CSS Pseudo Classes

All CSS Pseudo Classes
Selectors Description
:active The pseudo-class :active selects a link which is active. The small time when you click on the link typically using your mouse, that moment is the active stage of the link.

Example:

a:active {
  color: aqua;
}
:checked The Pseudo-class :checked selects an <input> element which is checked. While dealing with Forms, there can be input type checkbox, radio button or option.

Example:

input:checked {
  background-color: green;
}

input[type="checkbox"]:checked {
  border: 1px solid orange;
}
:default The Pseudo-class :default selects default form elements in the form.

Example:

input:default {
  margin: 5px;
}
:disabled The pseudo-class :disabled selects an <input> element which is disabled.

Example:

input[type="text"]:disabled {
 color:#fff;
}

input:disabled {
  border:2px solid tomato;
}
:empty The pseudo-class :empty selects all the elements that has no children at all.

Example:

p:empty {
  background: gray;
}

section:empty {
  background: blue;
}
:enabled The pseudo-class :enabled selects all the <input> elements that are enabled(Not disabled).

Example:

input[type="text"]:enabled {
  background: orange;
}

input:enabled {
  color: indianred;
}
:first In a print document, the pseudo-class :first is used with the @page at-rule to select the first page.

Example:

@page  :first {
  margin-left: 50%;
  margin-top: 50%;
 }
:first-child The pseudo-class :first-child selects the first child element from all sibling elements under a parent.

Example:

p:first-child {
  color: red;
  backgroud-color: gray;
}
:first-of-type The pseudo-class :first-of-type selects only the first element of a particular type among sibling elements.

Example:

section :first-of-type {
  background-color: tomato;
}
:focus The pseudo-class :focus selects the <input> element that has the current focus.

Example:

input:focus {
  background-color: orange;
  color: yellow;
}
:focus-within The pseudo-class :focus-within selects an element that has the current focus or the elements that are contained within the main element which has the current focus.

Example:

form:focus-within {
  background: #F7F6A8;
}
:hover The pseudo-class :hover selects a link when you mouse over it.

Example:

a:hover {
  background-color: gray;
  color: aqua;
}
:in-range The pseudo-class :in-range selects an <input> element whose value falls within the min and max range which is specified by that element.

Example:

<input type="text" name="textfield" placeholder="TextField">
<input type="number" min="1" max="5" value="3">

input {
  border: 1px solid black;
}

input:in-range {
  background-color: #C4F7A2;
}

input:out-of-range {
  background-color: #F7DED7;
  border: 2px solid red;
}
:invalid The pseudo-class :invalid selects an <input> element which contains an invalid value.

Example:

input:invalid {
  background-color: orange;
  border:2px solid indianred;
}
:lang() The pseudo-class :lang selects all the elements which contains a particular language attribute which is determined by the :lang pseudo-class.

Example:

p:lang(fr) { 
  background-color: blue;
}
:last-child The pseudo-class :last-child selects the last child element from all sibling elements under a parent.

Example:

p:last-child {
  background: #D7F2F7;
  color: #EE83EE;
}
:last-of-type The pseudo-class :last-of-type selects only the last element of a particular type among sibling elements.

Example:

section:last-of-type {
  background-color: blue;
}
:link The pseudo-class :link selects all the links which are not yet visited by the user in the current session.

Example:

a:link {
  background-color: orange;
  color: blue;
  text-decoration:none;
}
:not() The pseudo-class :not() selects all the elements that is not a particular element.

Example:

:not(p) {
  background-color: blue;
}

:not(div) {
  color: yellow;
}
:nth-child() The pseudo-class :nth-child() selects all the elements which is determined by the :nth-child() based on the position of those elements within all the siblings under a parent.

Example:

li:nth-child(3) {
  color: gray;
}

:nth-child(2n) {
  background-color: pink;
}
:nth-last-child() The pseudo-class :nth-last-child() selects all the elements which is determined by their position within all the siblings under a parent when you start counting from the last child.

Example:

p:nth-last-child(3) {
  color: aqua;
}

:nth-last-child(2n) {
  color: lime;
}
:nth-last-of-type() The pseudo-class :nth-last-of-type() selects all the elements which is of a particular type and is determined by their position within all the siblings under a parent when you start counting from the last child.

Example:

p:nth-last-of-type(2n) {
  background-color: blue;
}

p:nth-last-of-type(3) {
  color:  orange;
}
:nth-of-type() The pseudo-class :nth-of-type selects the nth element of a particular type among sibling elements.

Example:

section:nth-of-type(2n+1) {
  color: red;
}

/* Even paragraphs */
section:nth-of-type(2n) {
  color: blue;
}
:only-child The pseudo-class :only-child selects an element which is the only child of its parent. This element must not have any siblings.

Example:

div:only-child {
  background-color: pink;
}
:only-of-type The pseudo-class :only-of-type selects an element which is the only child of its parent of a particular type. This element must not have any siblings and must be of the same type.

Example:

div:only-of-type {
  color: red;
}
:optional The pseudo-class :optional selects an <input>, <textarea> or <select> elements which are not defined with "required" attribute.

Example:

input:optional {
  background: #E6F9DE;
  border:2px solid green;
}
:out-of-range The pseudo-class :out-of-range selects an <input> element whose value falls outside the min and max range which is specified by that element.

Example:

<input type="text" name="textfield" placeholder="TextField">
<input type="number" min="1" max="5" value="8">

input {
  border: 1px solid black;
}

input:in-range {
  background-color: #C4F7A2;
}

input:out-of-range {
  background-color: #F7DED7;
  border: 2px solid red;
}
:read-only The pseudo-class :read-only selects an <input> element which are "readonly". A user cannot edit a "readonly" element.

Example:

input:read-only {
  background: aqua;
}

input:-moz-read-only { /* For Firefox */
  background: aqua;
}
:read-write The pseudo-class :read-write selects an <input> element which can be edited a user.

Example:

input:read-write {
  background: grey;
}

input:-moz-read-write { /* For Firefox */
  background: grey;
}
:required The pseudo-class :required selects an <input>, <textarea> or <select> elements which are defined with a "required" attribute.

Example:

input:required {
  border: 2px solid #FFFFFF;
  background-color: #000000;
  color:  #FFFFFF;
}
:right In a print document, the pseudo-class :right is used with the @page at-rule to select the right-hand pages.

Example:

 @page :right {
   margin: 3px 4px;
   padding: 2px 1px;
 }
:root The pseudo-class :root selects the root element of the document. For HTML document, the <html> element is the root element.

Example:

:root {
  background: grey;
}
:target The pseudo-class :target selects a particular target element which contains an id to match a URL that has an anchor name.

Example:

:target {
  background-color: blue;
  margin: px;
  border: 2px solid aqua;
}

p:target::after {
  content: " * ";
  color: yellow;
}
:valid The pseudo-class :valid selects all <input> or <form> elements which contains a valid value.

Example:

input:valid {
  background-color: green;
}
:visited The pseudo-class :visited selects all the links which are visited by the user in the current session.

Example:

a:visited {
  color: hotpink;
}
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!