The :optional pseudo class targets inputs (including <select>s) that are not specifically set as required (do not have the required attribute). This can be useful when you want to give optional fields a specific look, maybe slightly less visible than required ones. Syntax input[type=text]:optional { border: 1px solid #eee; } Demo In the following demo, optional field (“Name”, “Gender” and “Continent”) have
:only-of-type
The :only-of-type pseudo-class selector in CSS represents any element that has no siblings of the given type. p:only-of-type { color: red; } If no tag precedes the selector, it will match any tag (e.g. :only-of-type). If another selector precedes it, it will matched based on the type of tag that selector matches. For example .example:only-of-type will behave like p:only-of-type if .example is applied to a paragraph element.
:only-child
The :only-child pseudo-class selector property in CSS represents an element that has a parent element and whose parent element has no other element children. This would be the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. div p:only-child { color: red; } For example, if we nest paragraphs within a <div> like so… <div> <p>This paragraph is the only child of its parent</p>
:nth-of-type
The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements. Suppose we have an unordered list and wish to “zebra-stripe”