Found 8894 Articles for Front End Technology

Role of CSS :nth-of-type(n) Selector

Chandu yadav
Updated on 30-Jun-2020 11:15:58

128 Views

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.    

Select every element that is the second element of its parent, counting from the last child

seetha
Updated on 30-Jun-2020 11:22:56

1K+ Views

Use the CSS :nth-last-of-type(n) selector to select every element that is the second element of its parent, counting from the last child.ExampleYou can try to run the following code to implement the :nth-last-of-type(n) selector:Live Demo                    p:nth-last-of-type(2) {             background: blue;             color: white;          }                     This is demo text 1.       This is demo text 2.       This is demo text 3.       This is demo text 4.       This is demo text 5.    

Style every element that is the second child of its parent with CSS

Arjun Thakur
Updated on 30-Jun-2020 11:22:25

684 Views

To style every element that is the second child of its parent with CSS, use the CSS :nth-child(n) selector.ExampleYou can try to run the following code to implement the :nth-child(n) selectorLive Demo                    p:nth-child(4) {             background: orange;             color: white;          }                     This is demo text 1.       This is demo text 2.       This is demo text 3.       This is demo text 4.       This is demo text 5.       This is demo text 6.    

X-axis 3D transform with CSS3

Ankith Reddy
Updated on 30-Jun-2020 11:19:17

112 Views

You can try to run the following code to implement X-axis 3D transform with CSS3ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }            div#myDiv {             -webkit-transform: rotateX(150deg);             /* Safari */ transform: rotateX(150deg);             /* Standard syntax */          }                              tutorials point.com                      Rotate X-axis                             tutorials point.com.                

Role of CSS :nth-child(n) Selector

George John
Updated on 30-Jun-2020 11:18:06

146 Views

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

Role of CSS :not (selector) Selector

Chandu yadav
Updated on 30-Jun-2020 11:17:36

249 Views

Use the CSS :not(selector) selector to style every element that is not the specified element. You can try to run the following code to implement the :not selectorExampleLive Demo                    p {             color: red;          }          :not(p) {             color: blue;          }                     Heading 1       Heading 2       Heading 3       This is a paragraph.       This is another paragraph.    

Style all unvisited links with CSS

radhakrishna
Updated on 30-Jun-2020 11:17:07

583 Views

To style all unvisited links, use the CSS :link selector. You can try to run the following code to implement the :link selector:ExampleLive Demo                    a:link {             background-color: orange;          }                     Demo Websitehttps://www.example.com/    

Role of CSS :link Selector

Giri Raju
Updated on 30-Jun-2020 11:16:36

151 Views

Use the CSS :link selector to style all unvisited links. You can try to run the following code to implement the :link selector −ExampleLive Demo                    a:link {             background-color: orange;          }                     Demo Websitehttps://www.example.com/    

Y-axis 3D transform with CSS3

seetha
Updated on 30-Jun-2020 11:09:40

122 Views

You can try to run the following code to implement Y-axis 3D transform with CSS3:ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#yDiv {             -webkit-transform: rotateY(150deg);             /* Safari */             transform: rotateY(150deg);             /* Standard syntax */          }                              tutorialspoint.com             Rotate Y axis                tutorialspoint.com.          

Role of CSS :last-child Selector

George John
Updated on 22-Jun-2020 15:32:37

151 Views

Use the CSS :last-child selector to style every elements that is the last child of its parent. You can try to run the following code to implement the :last-child selectorLive Demo                    p:last-child {             background: orange;          }                     This is demo text1.       This is demo text2.       This is demo text3.    

Advertisements