CSS Solid

☰

CSS Pseudo-Class

CSS pseudo-class applies CSS styles to the HTML elements based on some characteristics which cannot be specified using element attributes/classes/IDs.

Syntax:

Selector:pseudo-class {
    property: value;
}

Note: 1) :link and :visited pseudo classes to be placed before :hover. Otherwise cascading rules will hide the ‘color’ property of the :hover

Following table explains list of available CSS Pseudo classes.

Dynamic pseudo classes
Following each part has three sections.
1. Pseudo Class
2. Description
3. Example
:link Selects all unvisited links.
a:link{color:blue;}
:visitedSelects all visited links.
a:visited{color:red;}
:activeSelects an element when mouse over on the element.
a:hover{color:green;}
:focusSelects an element when link element gets focus.
a:focus{color:gray;}

Structural pseudo classes
Following each part has three sections.
1. Pseudo Class
2. Description
3. Example
:first-child Selects the first child element of parent element when first child element is a specified element. 
div:first-child {
    color:blue;
}
:last-child Selects the last child element of parent element when last child element is a specified element. 
li:last-child {
   color: red;
}
:first-of-type Selects the first child element of its type of parent element. 
p:first-of-type {
   color:red;
}
:last-of-type Selects the last child element of its type of the parent element. 
p:last-of-type {
   color: red;
}
:only-child Selects a specified element if it is the only child element of parent element. 
p:only-child {
   color:red;
}
:only-of-type Selects a specified child element if it is only child element of its type under parent element. 
p:only-of-type {
   color: red;
}
:empty Selects the empty elements. 
div:empty {
   visibility:hidden;
}
:root Selects the root element. Root element refers the HTML element. 
:root {
   border:groove;
}
:nth-child Selects one or more child elements of parent element. 
li:nth-child(2) {
        color:red;
    }
:nth-last-child Selects one or more child elements (count starts from bottom to top) of parent element. 
li:nth-last-child(3) {
    color:red;
}
:nth-of-type Selects one or more child elements based on its type of parent element. 
p:nth-of-type(2) {
   color: red;
}
:nth-last-of-type Selects one or more child elements (count starts from bottom to top) based on its type of parent element. 
p:nth-last-of-type(2) {
    color: red;
}

UI element states pseudo classes
Following each part has three sections.
1. Pseudo Class
2. Description
3. Example
:enabled Selects enabled elements. 
:enabled {
    background-color:green;
    color:white;
}
:disabled Selects disabled elements. 
:disabled {
    background-color:lightgray;
}
:checked Selects checked elements.
input:checked { height:25px; }

Target pseudo class
Following each part has three sections.
1. Pseudo Class name
2. Description
3. Example
:target Selects an element that is specified in the referring URI (# followed by element id).
:target { color:white; }

Negation pseudo class
Following each part has three sections.
1. Pseudo Class name
2. Description
3. Example
:not Exclude specified element selection.
div:not(#divEnd){ color: red; }

Pseudo-class Description Example
Dynamic pseudo classes
:link Selects all unvisited links. a:link{color:blue;}
:visited Selects all visited links. a:visited{color:red;}
:active Selects an element when mouse over on the element. a:hover{color:green;}
:focus Selects an element when link element gets focus. a:focus{color:gray;}
Structural pseudo classes
Structural pseudo classes explained
Selects the first child element of parent element when first child element is a specified element. 
div:first-child {
    color:blue;
 }
Selects the last child element of parent element when last child element is a specified element. 
li:last-child {
   color: red;
}
Selects the first child element of its type of parent element. 
p:first-of-type {
   color:red;
}
Selects the last child element of its type of the parent element. 
p:last-of-type {
   color: red;
}
Selects a specified element if it is the only child element of parent element. 
p:only-child {
   color:red;
}
Selects a specified child element if it is only child element of its type under parent element. 
p:only-of-type {
   color: red;
}
Selects the empty elements. 
div:empty {
   visibility:hidden;
}
Selects the root element. Root element refers the HTML element. 
:root {
   border:groove;
}
Selects one or more child elements of parent element. 
li:nth-child(2) {
   color:red;
}
Selects one or more child elements (count starts from bottom to top) of parent element. 
li:nth-last-child(3) {
    color:red;
}
Selects one or more child elements based on its type of parent element. 
p:nth-of-type(2) {
   color: red;
}
Selects one or more child elements (count starts from bottom to top) based on its type of parent element. 
p:nth-last-of-type(2) {
   color: red;
}
UI element states pseudo classes
Selects enabled elements. 
:enabled {
   background-color:green;
   color:white;
}
Selects disabled elements. 
:disabled {
   background-color:lightgray;
}
Selects checked elements. 
input:checked {
   height:25px;
}
Target pseudo class
Selects an element which is specified in the referring URI (# followed by element id). 
:target {
   color:white;
}
Negation pseudo class
Exclude specified element selection. 
div:not(#divEnd) {
   color: red;
}