CSS Articles - Page 105 of 130

Use the CSS :required selector to style <input> elements with a "required" attribute. You can try to run the following code to implement the :required selector:ExampleLive Demo                    input:required {             background-color: orange;          }                              Subject:          Student:          

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

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 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" 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 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.          

The following are the methods used to call 3D transforms:ValuesDescriptionmatrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)Used to transforms the element by using 16 values of the matrixtranslate3d(x, y, z)Used to transforms the element by using x-axis, y-axis, and z-axistranslateX(x)Used to transforms the element by using x-axistranslateY(y)Used to transforms the element by using y-axistranslateZ(z)Used to transforms the element by using y-axisscaleX(x)Used to scale transforms the element by using x-axisscaleY(y)Used to scale transforms the element by using y-axisscaleY(y)Used to transforms the element by using z-axisrotateX(angle)Used to rotate transforms the element by using x-axisrotateY(angle)Used ... Read More

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.