ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [CSS] :first-child, :last-child
      Project/kakao-clone-v2 2019. 10. 31. 18:53

       :first-child

      :first-child는 부모 요소 안에 있는 첫번째 자식만을 선택할 수 있는 선택자이다.

       

      :last-child 선택자

      :last-child 선택자는 부모 요소 안에 있는 마지막 자식만 선택하는 선택자이다.

       

       

      예제

       

       

       

      소스코드

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      <!DOCTYPE html>
      <html lang="en">
       
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              p:first-child {
                  color: red;
              }
       
              ol li:last-child {
                  background-color: aqua;
              }
          </style>
      </head>
       
      <body>
          <h4>:first-child, last-child</h4>
          <div>
              <p>첫줄</p>
              <p>내용</p>
              <p>입니다.</p>
          </div>
          <ol>
              <li>1번</li>
              <li>2번</li>
              <li>3번</li>
          </ol>
      </body>
       
      </html>
      		 cs

       

      'Project > kakao-clone-v2' 카테고리의 다른 글

      [CSS] Combinators  (0) 2019.11.19
      pinterest, dribbble  (0) 2019.10.31
      [CSS] Position  (0) 2019.10.24
      [CSS] box-sizing  (0) 2019.10.24
      [CSS] Justify content and Allign items  (0) 2019.10.24

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바