:nth-child(n)





css/style.css
  • /*number, index=2*/
  • .a p:nth-child(2) {
  •  color: #00F;
  •  font-size: 18px;
  • }
  •  
  • /*formula, index=3*/
  • .b p:nth-child(3n+0) {
  •  color: #00F;
  •  font-size: 18px;
  • }
  •  
  • /*keyword odd(нечетные)*/
  • .c p:nth-child(odd) {
  •  color: #00F;
  •  font-size: 18px;
  • }
  •  
  • /*keyword even(четные)*/
  • .d p:nth-child(even) {
  •  color: #00F;
  •  font-size: 18px;
  • }
  •  
  • .c p, .d p {
  •  display: inline;
  • }
/*number, index=2*/
.a p:nth-child(2) {
 color: #00F;
 font-size: 18px;
}

/*formula, index=3*/
.b p:nth-child(3n+0) {
 color: #00F;
 font-size: 18px;
}

/*keyword odd(нечетные)*/
.c p:nth-child(odd) {
 color: #00F;
 font-size: 18px;
}

/*keyword even(четные)*/
.d p:nth-child(even) {
 color: #00F;
 font-size: 18px;
}

.c p, .d p {
 display: inline;
}


index.html
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <div class="a">
  •   <p>Hello World!</p>
  •   <p>To be or not to be?</p>
  •   <p>Привет Мир!</p>
  •  </div>
  •  <hr />
  •  <div class="b">
  •   <p>Hello World!</p>
  •   <p>Привет Мир!</p>
  •   <p>To be or not to be?</p>
  •   <p>Быть или не быть!</p>
  •  </div>
  •  <hr />
  •  <div class="c">
  •   <p>one</p>
  •   <p>two</p>
  •   <p>three</p>
  •   <p>four</p>
  •   <p>five</p>
  •  </div>
  •  <hr />
  •  <div class="d">
  •   <p>one</p>
  •   <p>two</p>
  •   <p>three</p>
  •   <p>four</p>
  •   <p>five</p>
  •  </div>
  • </body>
  • </html>
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <div class="a">
  •   <p>Hello World!</p>
  •   <p>To be or not to be?</p>
  •   <p>Привет Мир!</p>
  •  </div>
  •  <hr />
  •  <div class="b">
  •   <p>Hello World!</p>
  •   <p>Привет Мир!</p>
  •   <p>To be or not to be?</p>
  •   <p>Быть или не быть!</p>
  •  </div>
  •  <hr />
  •  <div class="c">
  •   <p>one</p>
  •   <p>two</p>
  •   <p>three</p>
  •   <p>four</p>
  •   <p>five</p>
  •  </div>
  •  <hr />
  •  <div class="d">
  •   <p>one</p>
  •   <p>two</p>
  •   <p>three</p>
  •   <p>four</p>
  •   <p>five</p>
  •  </div>
  • </body>
  • </html>