CSS Pseudo-class selectors2

by istiq20

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Pseudo-class Selectors</title>
  </head>
  <body>
      <div>
        <p>Restoran Daisy</p>
     </div>

     <div>
       <p>Selamat datang di restoran Daisy</p>
     </div>

     <div>
       <p>Daftar menu hari ini</p>
     </div>

     <ul>
       <li>Bakso</li>
       <li>Mie ayam</li>
       <li>Nasi goreng</li>
       <li>Sate Madura</li>
       <li>Empal gentong</li>
     </ul>
  </body>
</html>

CSS

/* memberi style pada elemen child ke-2 dari parentnya (elemen body)*/
div:nth-child(2) {
  background: red;
}

/* memberi style pada elemen child ke-3 dari parentnya*/
:nth-child(3) {
  background: yellow;
}

/* memberi style pada elemen child ke-2 dari parentnya (elemen ul)*/
li:nth-child(2) {
  background: lightgreen;
}