Front End Technology Articles - Page 502 of 652

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.    

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.          

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:          

Use the matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) method to transform the element using 16 values of matrix.Let us see the syntaxmatrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)Here, a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4 are numbers showing the linear transformationa4 b4 c4 are numbers describing the translation to apply.

Use the CSS :empty selector to style every element that has no children with CSS. You can try to run the following code to implement the :empty selector −ExampleLive 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.          

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

The position: fixed; property allows you to position element relative to the viewport. You can try to run the following code to implement CSS position: fixed;ExampleLive Demo                    div{             position: fixed;             bottom: 0;             right: 0;             width: 200px;             border: 3px solid blue;          }                     position: fixed;       The position: fixed; property allows you to position element relative to the viewport.                div has position: fixed;           Output

Use the CSS :checked selector to style every checked element. You can try to run the following code to implement the :checked selector:ExampleLive Demo                    input:checked {             height: 20px;             width: 20px;          }                     Fav sports:                Football          Cricket           Tennis          Tennis           Output