Found 1594 Articles for CSS

Role of CSS: first-child Selector

Chandu yadav
Updated on 30-Jun-2020 09:48:28

196 Views

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.          

CSS position: absolute;

Prabhas
Updated on 30-Jun-2020 09:47:24

261 Views

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;          

Style every enabled element with CSS

Arjun Thakur
Updated on 30-Jun-2020 09:46:17

196 Views

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:          

Role of CSS :enabled Selector

seetha
Updated on 30-Jun-2020 09:51:14

216 Views

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:          

Style every element that has no children with CSS

Ankith Reddy
Updated on 30-Jun-2020 09:50:29

961 Views

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.          

Transform the element by using 16 values of matrix with CSS3

George John
Updated on 22-Jun-2020 14:57:42

229 Views

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.

Role of CSS :empty Selector

usharani
Updated on 30-Jun-2020 09:49:59

205 Views

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.          

Role of CSS: disabled Selector

Chandu yadav
Updated on 30-Jun-2020 09:42:34

229 Views

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:          

Style every disabled element with CSS

varun
Updated on 30-Jun-2020 09:43:53

559 Views

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

Style every checked element with CSS

Giri Raju
Updated on 22-Jun-2020 14:53:19

194 Views

To style every checked element, use the CSS :checked selector. 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

Advertisements