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

CSS Web Development Front End Technology

To style every element that is the second child of its parent with CSS, use the CSS :nth-child(n) selector.

Example

You can try to run the following code to implement the :nth-child(n) selector

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:nth-child(4) {
            background: orange;
            color: white;
         }
      </style>
   </head>
   <body>
      <p>This is demo text 1.</p>
      <p>This is demo text 2.</p>
      <p>This is demo text 3.</p>
      <p>This is demo text 4.</p>
      <p>This is demo text 5.</p>
      <p>This is demo text 6.</p>
   </body>
</html>

Arjun Thakur

Published on 09-May-2018 07:09:42

Related Questions & Answers
Style every element that is the only child of its parent with CSS
Style every element that is the only element of its parent with CSS
Style every element that is the first element of its parent with CSS
Style every element that is the last element of its parent with CSS
Style every element that is the nth element of its parent with CSS
Style every elements that is the last child of its parent with CSS
Style every elements that is the first child of its parent with CSS
Style every element that is the child of its parent, counting from the last child with CSS
Select every element that is the second element of its parent, counting from the last child
Style every element that has no children with CSS
Style every element with a lang attribute value with CSS
Selects every <ul> element that are preceded by a element with CSS
Selects all elements where the parent is a <div> element with CSS
Style every checked <input> element with CSS
Style every disabled <input> element with CSS

Previous Page Print Page

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

Example