Front End Technology Articles - Page 569 of 745

To select elements that are read-only, use the CSS :read-only selector.ExampleYou can try to run the following code to implement the :read-only selectorLive Demo                    input:read-only {             background-color: blue;             color: white;          }                              Subject:          Student:          

Use the CSS :read-only selector to select elements that are read-only.ExampleYou can try to run the following code to implement the :read-only selector:Live Demo                    input:read-only {             background-color: blue;             color: white;          }                              Subject:          Student:          

Use the CSS :out-of-range selector to style elements with a value outside a specified range.ExampleYou can try to run the following code to implement the :out-of-range selectorLive Demo                    input:out-of-range {             border: 3px dashed orange;             background: yellow;          }                           The style only works for the value entered out of range    

Use the CSS :out-of-range selector to style elements with a value outside a specified range.ExampleYou can try to run the following code to implement the :out-of-range selector:Live Demo                    input:out-of-range {             border: 3px dashed orange;             background: yellow;          }                           The style only works for the value entered out of range    

Use the CSS :optional selector to style elements with no "required" attribute.ExampleYou can try to run the following code to implement the :optional selector:Live demo                    input:optional {             background-color: blue;          }                              Subject:          Student:          

Use the CSS :optional selector to style elements with no "required" attributeExampleYou can try to run the following code to implement the :optional selector:Live Demo                    input:optional {             background-color: blue;          }                              Subject:          Student:          

Use the CSS :only-child selector to style every element that is the only child of its parent.ExampleYou can try to run the following code to implement the :only-child selectorLive Demo                    p:only-child {             background: orange;          }                     Heading                This is a paragraph.                      This is a paragraph.          This is a paragraph.          This is a paragraph.          

Use the CSS :only-of-type selector to style every element that is the only element of its parent.ExampleYou can try to run the following code to implement the :only-of-type selector:Live Demo                    p:only-of-type {             background: orange;             color: white;          }                              This is demo text 1.                      This is demo text 2.          This is demo text 3.          This is demo text 4.          

Use the CSS :only-of-type selector to style every element that is the only element of its parent.ExampleYou can try to run the following code to implement the :only-of-type selectorLive Demo                    p:only-of-type {             background: orange;             color: white;          }                              This is demo text 1.                      This is demo text 2.          This is demo text 3.          This is demo text 4.          

Use the CSS :nth-of-type(n) selector to style every element that is the nth element of its parent. You can try to run the following code to implement the :nth-of-type(n) selectorExampleLive Demo                    p:nth-of-type(2) {             background: yellow;          }                     This is demo text 1.       This is demo text 2.       This is demo text 3.       This is demo text 4.