/    /  CSS nth selector

CSS nth selector

 

The n can either be a keyword, formula, or a number. It is used to match the elements based on their position within a group of siblings. It matches each element, which is the nth-child.

 

Syntax:

 

:nth-child(n) { 
  //CSS Property 
}

 

Example:

 

The functional notation 3n+4 that will represent the elements.

 

<!DOCTYPE html>
<html>
  <head>
    <title>CSS :nth-child Selector</title>
    <style> 
      p:nth-child(3n+4) {
       background: yellow;
       color: black;
                      font-size:30px;
        }
     </style>
  </head>
  <body style = "text-align:center">
    <h1>
      Hello World
    </h1> 

    <p>It will not affected.</p>
    <p>It will be affected.</p>
    <p>Not affected.</p>
    <p>Not affected.</p>
    <p>It will be affected.</p>

  </body>
</html>

 

OUTPUT:

 

CSS nth selector

 

Example:

 

Use odd and even keywords.

 

<!DOCTYPE html>
<html>
  <head>
    <title>CSS :nth-child Selector</title>
    <style> 
      p:nth-child(even) {
       background: yellow;
       color: black;
                       font-size:30px;
      }
      p:nth-child(odd) {
       background: blue;
       color: white;
                      font-size:20px;

    </style>
  </head>
  <body style = "text-align:center">
    <h1>
      Hello World
    </h1> 

    <p>Odd</p>
    <p>Even</p>
    <p>Odd</p>
    <p>Even</p>
    <p>Odd</p>
  </body>
</html>

 

OUTPUT:

 

CSS nth selector