Structural pseudo-classes are used to refer to the position of an element in a web page and they consist of
:first-child – It applies styling when an element is the first child of another element. It is not supported by IE6.
:last-child – It applies styling when an element is the last child of another element. It is not widely supported by browsers.
:nth-child(n) – It applies styling when an element is the nth child of another element like if the value in the brackets is 3 , the third child element will be selected and applied styles on. It is supported IE9 onwards.
form div:first-child {
background: #f00; }
background: #f00; }
form div:last-child {
background: #0f0; }
background: #0f0; }
form div:nth-child(3) {
background: #00f; }
background: #00f; }
In the example various structural pseudo-classes are used to customize the background color depending on the first, last and third child div elements of the form.
In the first example the selector targets a div element that is the first child of another element, not an element that is the first child of a div.
