The :out-of-range pseudo selector in CSS matches input elements when their value is outside the range specified as being acceptable. <input type=”number” min=”5″ max=”10″> input:out-of-range { border: 5px solid red; } I believe it’s only relevant on input[type=number]. Range inputs don’t allow values outside their min/max and it doesn’t make much sense on any other type of
CSS
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
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.
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>