CSS3 Pseudo Classes

In CSS, Pseudo Class is basically give you more control over your styling. There are predefined Pseudo classes, you can select from that, but you cannot create your own Pseudo class. Pseudo class names are not case-sensitive.

In CSS1 & CSS2, the single-colon was used for both pseudo-classes and pseudo-elements. But, In CSS3, single-colon is use for pseudo-classes and double-colon is use for pseudo-elements to distinguish between pseudo-classes and pseudo-elements.

Anchor Pseudo-classes

unvisited link - a:link { color: red; }

visited link - a:visited { color: #00FF00; }

mouse over link - a:hover { color: #FF00FF; }

selected link - a:active { color: #0000FF; }

Pseudo-classes can be combined with CSS classes like:

a.highlight:hover { color: #ff0000; }

first-child Selector

The :first-child selector is used to select the only the first specified child of its parent. Ver: CSS2

p:first-child { 
    background-color: yellow;
}

last-child Selector

The :last-child selector is used to select the only the last specified child of its parent. Ver: CSS3

p:last-child {
    background: #ff0000;
}

nth-child() Selector

The :nth-child(n) selector select every nth child element. Ver: CSS3

p:nth-child(2) {
    background: red;
}
	
p:nth-child(2n) {
    background: red;
}
    
p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
}

p:nth-child(3n+1) {
    background: red;
}

tr:nth-child(2n){ background-color:pink; }

Example: nth-child

nth-last-child() Selector

The :nth-last-child(n) selector select every element that is the nth child, from the last child. Ver: CSS3

p:nth-last-child(2) {
    background: red;
}

only-child Selector

The :only-child selector select every element that is only child of its parent. Ver: CSS3

p:only-child {
    background: #ff0000;
}

checked selector

The :checked selector is use to style checked elements (only for radio buttons, checkboxes and <option> element). Ver: CSS3

input:checked {
    height: 50px;
    width: 50px;
}

enabled selector

The :enabled selector is use to style all enabled elements (mostly used on input box). Ver: CSS3

input[type='text']:enabled {
    background: #ffff00;
}

disabled selector

The :disabled selector is use to style all disabled elements (mostly used on input box). Version: CSS3

input[type='text']:disabled {
    background: #dddddd;
}

empty selector

Specify a background color for empty elements. Ver: CSS3

p:empty {
    background: #ff0000;
}

focus Selector

The :focus selector is used to select the element that has focus or selection. Ver: CSS2

input:focus { 
    background-color: yellow;
}

in-range Selector

The :in-range selector selects all elements which are within a specified range. Ver: CSS3

input: in-range {
    border: 2px solid yellow;
    background: yellow;
}

out-of-range Selector

The :out-of-range selector selects all elements which are not in a specified range. Ver: CSS3

input:out-of-range {
    border: 2px solid red;
}

CSS3 :valid Selector

The :valid selector selects form elements which contain valid value, according to the element's settings.

Note: The :valid selector only works with form elements with limitations, such as input elements with min and max attributes, email field, or number field, etc.

input:valid { 
    background-color: yellow;
}

CSS3 :invalid Selector

The :invalid selector selects form elements with a value that does not validate according to the element's settings. Ver: CSS3

input:invalid { 
    border: 2px solid red;
}

CSS3 :not Selector

The :not(selector) select every element that are NOT specified. Ver: CSS3

:not(p) {
    color: #ff0000;
}

CSS3 :required Selector

The :required selector selects form elements which are required. Version: CSS3

Note: The :required selector only applies to the form elements: input, select and textarea.

input:required {
    background-color: yellow;
}

CSS3 :optional Selector

The :optional selector selects form elements which are optional. Ver: CSS3

Note: The :optional selector only applies to the form elements: input, select and textarea.

input:optional {
    background-color: yellow;
}

CSS3 :read-only Selector

The :read-only selector selects elements which are readonly. Ver: CSS3

input:read-only {
    background-color: yellow;
}

CSS3 :read-write Selector

The :read-write selector selects form elements which are "readable" and "writeable". Ver: CSS3

input:read-write { 
    background-color: yellow;
}

CSS3 :root Selector

The :root selector select the document's root element. i.e all elements. Ver: CSS3

:root {
    background: red;
}

CSS3 :target Selector

In anchor tag if you create hyperlink on same page, than :target selector select the target element. Ver: CSS3

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5e3cc;
}