My Blog

The ::placeholder pseudo-class is used to style the placeholder text of a form element. The ::placeholder pseudo-element selects <form> elements with placeholder text in an <input> field. By default, the appearance of placeholder text is a semi-transparent or light gray color in most browsers. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of…

The :out-of-range pseudo-class styles the elements that have range limitations when the value of the element is outside the specified range. Version Selectors Level 4 Syntax Example of the :out-of-range selector:

The :optional selector selects optional elements. Form elements are optional when attribute is not required. Form elements that can be selected using :optional are <input>, <select> and <textarea> without a required attribute. The :optional selector can be linked with other selectors (e.g. :hover) and with pseudo-elements (e.g. ::after). Version CSS Basic User Interface Module CSS2 Universal Selector Syntax Example of the :optional selector: In the given example both the :optional and…

The :only-of-type selector matches elements that are the only child of its type. The p:only-of-type matches a paragraph only if it is the only paragraph inside its parent. The :only-of-type and the :only-child selectors have similarities, except that the :only-child selector selects the element if its parent has no other children of any type. Version Selectors Level 3 Selectors Level 4 Syntax Example of the…

The :only-child pseudo-selector matches an element if it is the only child of its parent. The element is selected only if its parent has no other children of any type. The :only-child pseudo-class is the same as :first-child, :last-child or :nth-child(), :nth-last-child(), but with a lower specificity. Version Selectors Level 4 Selectors Level 3 Syntax Example of the :only-child selector: Example of…

The :nth-of-type() pseudo-class selects the elements of the same type based on their index. The :nth-of-type() can be specified by a number, a keyword, or a formula. The :nth-of-type selector is similar to :nth-child but there is a difference: it is more specific. The :nth-of-type targets a certain type of an element in the arrangement only in relation to similar siblings.…

The :nth-last-of-type() pseudo-class selects elements based on their index starting from the last element upwards. The:nth-last-of-type() can be specified by a number, a keyword, or a formula. The :nth-last-of-type() pseudo-class is similar to :nth-of-type() but there is a difference: it counts the items from the end whereas the nth-of-type counts them from the beginning. This pseudo-class is also similar to :nth-last-child with…

The :nth-last-child() pseudo-class selects elements based on their index starting from the last element upwards. The :nth-last-child() can be specified by a number, a keyword, or a formula. Keyword values odd Selects elements with odd index numbers (e.g 1, 3, 5, 7 etc.). even Selects elements with even index numbers (e.g 2, 4, 6, 8 etc.). Functional notation <An+B>…

The :nth-child() pseudo-class selects and adds styles to elements based on their index. The :nth-child() can be specified by a number, a keyword, or a formula. Keyword values odd Represents those elements whose numeric position is odd (e.g 1, 3, 5, 7 etc.). even Represents those elements whose numeric position is even (e.g 2, 4, 6, 8 etc.). Functional…

The :not() pseudo-class represents elements that do not match a list of selectors. It is also known as the negation pseudo-class. It is a functional pseudo-class selector that takes a simple selector as an argument and matches with one or more elements not being represented by the argument. The :not() selector takes as an argument any of…