0

I'm trying to style these two <div>'s by using nth-child, however, when I add the psuedo-class: :nth-child to my <p> it changes both paragraphs instead of one.

Here's my website: 

body {
  margin: 0 auto;
}

div {
  height: 200px;
  width: 250px;
  float: left;
  border: 1px solid black;
}

p {
  padding-left: 20px;
  margin: 0;
  font-size: 18px;
  font-family: calibri;
}

p:nth-child(1) {
  background: yellow;
}
<html lang="pl">
 <head>
  <title>Budowa strony</title>
  <meta charset="utf-8">
  <meta name="PAI 12" 
   content="Opis strony">
  <link rel="stylesheet" href="style2.css">
 </head>

 <body>
  <div>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
  </div>
  <div>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
   <p>•  tekst </p>
  </div>
 </body>
</html>
Tigerrrrr
  • 526
  • 6
  • 24
Alez
  • 37
  • 5
  • 1
    nth-child consider the parent container not the whole html, so you have two p that are nth-child(1) – Temani Afif Mar 23 '20 at 15:20
  • To expand on Temani's comment, `:nth-child(1)` would look for the first `

    ` in the `

    `. To fix your code, you should do `div:first-child > p:first-child` (feel free to replace the `:first-child` with `:nth-child(1)`, however, Afaik there is no difference).
     – Tigerrrrr Mar 23 '20 at 15:38

0 Answers0