    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>가상 클래스 선택자 사용하기</title>
      <style>
        p:hover { background-color: #ff8; }
        li::first-letter { color: red; }
        li:nth-child(2) { color: green; }
        li:last-child { color: blue; }
      </style>
    </head>
    <body>
      <h3>바나나</h3>
      <p><img src="../media/banana1.png" width="120"></p>
      <ul>
        <li>노란색의 아열대 과일</li>
        <li>지방이 없어 체중 조절에 좋음</li>
        <li>식이섬유가 풍부해 주식 대용으로 적당</li>
      </ul>
    </body>
    </html>