Front End Technology Articles - Page 645 of 860

To style all elements with an invalid value, use the CSS :invalid selector.ExampleYou can try to run the following code to implement the :invalid selector −Live Demo                    input:invalid {             background: red;          }                     Heading             The style (red color background) appears if you type an irrelevant/ invalid email address.    

Use the CSS :invalid selector to style all elements with an invalid value. You can try to run the following code to implement the :invalid selectorExampleLive Demo                    input:invalid {             background: red;          }                     Heading                    The style (red color background) appears if you type an irrelevant/ invalid email address.    

Use the CSS :in-range selector to style elements with a value within a specified range. You can try to run the following code to implement the :in-range selector −ExampleLive Demo                    input:in-range {             border: 3px dashed orange;             background: yellow;          }                           The style only works for the value entered i.e. 9    

To style links on mouse over with CSS, use the CSS: hover selector. You can try to run the following code to implement the: hover, selector,ExampleLive Demo                    a:hover {             background-color: orange;          }                     Google       Keep the mouse cursor on the above link and see the effect.    

Use the CSS :first-of-type selector to style every element that is the first element of its parent with CSS.ExampleYou can try to run the following code to implement the :first-of-type selectorLive Demo                    p:first-of-type {             background: orange;          }                     This is demo text1.       This is demo text2.    

Use the CSS :first-child selector to style every elements that is the first child of its parent.ExampleYou can try to run the following code to implement the :first-child selectorLive Demo                    p:first-child {             background-color: orange;          }                     Heading       This is demo text.                This is demo text, with the first child of its parent div.          This is demo text, but not the first child.          

The position: absolute; property allows you to position element relative to the nearest positioned ancestor.ExampleYou can try to run the following code to implement CSS position: absolute;Live Demo                    div.one {             position: relative;             width: 500px;            height: 150px;            border: 2px solid blue;          }          div.two {             position: absolute;             top: 70px;             right: 0;             width: 300px;             height: 50px;             border: 2px solid yellow;          }                     position: absolute;       The position: absolute; property allows you to position element relative to the nearest positioned ancestor.       div has position: relative;          div has position: absolute;          

To style every enabled element, use the CSS :enabled selector.ExampleYou can try to run the following code to style enabled elementLive Demo                    input:enabled {             background: blue;          }                              Subject          Student:          Age:          

Use the CSS :enabled selector to style every enabled element. You can try to run the following code to implement the :enabled selector −ExampleLive Demo                    input:enabled {             background: blue;          }                              Subject          Student:          Age:          

To style every element that has no children with CSS, use the: empty selector t. You can try to run the following code to implement the: empty selectorExampleLive Demo                    p.demo {             width: 300px;             height: 20px;             background: gray;          }          p:empty {             width: 150px;             height: 20px;             background: orange;          }                     This is demo text. Below is empty text.