Pseudo Class 2

First-of-type
* p:first-of-type {...} would apply the CSS rule(s) to any p element that is the first of its type within its parent element.

Last-of-type
* p:last-of-type {...} would apply the CSS rule(s) to any p element that is the last of its type within its parent element.

Only-of-type
* p:only-of-type {...} would apply the CSS rule(s) to any p element that is the only one of its type within its parent element.

Root
* This pseudo-class matches the root element of the document (in HTML documents that would be the HTML element itself).
* :root {...} would apply its CSS rule(s) to the whole document.

Empty
* :empty {...} would apply its CSS rule(s) to any empty element in the HTML document.
* NB: If there is a blank space inside the element in the HTML this would not be considered to be empty.

Target
* This pseudo-class operates in a slightly different way, and is hard to explain on this blog when you cannot type in HTML tags!
* In the CSS
:target {background:red;}
p {background:gray;}
* In the HTML
Inside a p tag you would have an a tag with the href="#pelement"
Then there would be another paragraph with an id="pelement"
* To start with all the paragraphs would have a background of gray, however when the user clicks on the anchor it would add the "#pelement" to the end of the address bar and this would trigger the target pseudo-class which would in turn apply the CSS rule of background:red to any element with an ID that matches "pelement".

Enabled and Disabled
* This pseudo-class allows us to determine whether an element is enabled (either a clickable object or a form object) or whether it is disabled.
* For example, with two checkboxes:
input:enabled+span {...} would apply the CSS formatting to the span elements of all the enabled checkboxes.
input+span {...} along with it would apply this alternative formatting to all remaining disabled checkboxes.
* If we changed the first selector to input:disabled+span then the opposite would happen.

Checked
* This allows us to modify the appearance of elements that can be toggled on and off, e.g. radio buttons and checkboxes
* For this you would use the selector input:checked+span {...} and the formatting would only be applied when that item is selected.

Not
* p*:not(q) {...} would apply the CSS rule(s) to every element (using the universal selector) inside the p element that is NOT the q element.