jQuery :first-child Selector

description : jQuery :first-child Selector
author : 오션
email : shlim@repia.com
lastupdate : 2021-06-02

The source of this article

Example

부모 요소의 첫 번째 자식인 모든 <p> 요소를 선택합니다.

<body>
 
  <p>The first paragraph in body.</p> <!-- 배경색 변경 -->
 
  <div style="border: 1px solid blueviolet">
    <p>The first paragraph in div.</p> <!-- 배경색 변경 -->
    <p>The last paragraph in div.</p>
  </div><br>
 
  <div style="border: 1px solid navy">
    <span>This is a span element.</span>
    <p>The first paragraph in another div.</p>
    <p>The last paragraph in another div.</p>
  </div>
 
  <p>The last paragraph in body.</p>
 
  <script>
    $(document).ready(function () {
      $("p:first-child").css("background-color", "lightgreen");
    });
  </script>
 
</body>

Definition and Usage

:first-child 선택자는 부모의 첫 번째 자식인 모든 요소들을 선택합니다.

Tip: :last-child 선택자를 사용하여 부모의 마지막 자식 요소들을 선택합니다.

Syntax

$(":first-child")

Example

모든 <div>요소들의 첫 번째 <p> 요소를 선택합니다.

<body>
 
  <p>The first paragraph in body.</p>
 
  <div style="border: 1px solid blueviolet">
    <p>The first paragraph in div.</p> <!-- 텍스트 컬러 변경됨 -->
    <p>The last paragraph in div.</p>
  </div><br>
 
  <div style="border: 1px solid navy">
    <p>The first paragraph in another div.</p> <!-- 텍스트 컬러 변경됨 -->
    <p>The last paragraph in another div.</p>
 
    <p>The last paragraph in body.</p>
 
    <script>
      $(document).ready(function () {
        $("div p:first-child").css("color", "red");
      });
    </script>
 
</body>

Example

:first와 :first-child의 차이점

<body>
 
  <button id="btn1">:first</button>
  <button id="btn2">:first-child</button>
 
  <div style="border: 1px solid blueviolet">
    <p>The first paragraph in div.</p>  <!-- p:first & p:first-child -->
    <p>The last paragraph in div.</p>
  </div><br>
 
  <div style="border: 1px solid navy">
    <p>The first paragraph in another div.</p><!-- p:first-child -->
    <p>The last paragraph in another div.</p>
 
    <script>
      $(document).ready(function () {
        $("#btn1").click(function () {
          $("p:first").css("background-color", "red");
        });
        $("#btn2").click(function () {
          $("p:first-child").css("background-color", "skyblue");
        });
      });
      $("#btn2")
    </script>
 
</body>

Example

:first, :first-child, :first-of-type 의 차이점

<body>
 
  <p>The first paragraph in body, and the first child in div.</p>
 
  <div style="border:1px solid red;">
    <p>The first paragraph in div, and the first child in div.</p>
    <p>The last paragraph in div, and the last child in div.</p>
  </div><br>
 
  <div style="border:1px solid blue;">
    <span>This is a span element, and the first child in this div.</span>
    <p>The first paragraph in another div, and the second child in this div.</p>
    <p>The last paragraph in another div, and the third child in this div.</p>
    <span>This is a span element, and the last child in this div.</span>
  </div><br>
 
  <div style="border:1px solid violet">
    <p>The first paragraph in another div, and the first child in this div.</p>
    <p>The last paragraph in the another div, and the last child in this div.</p>
  </div><br>
 
  <p>The last paragraph in body, and the last child in div.</p>
 
  <button>:first</button>
  <button>:first-child</button>
  <button>:first-of-type</button><br><br>
 
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        var btn = $(this).text();
        $("p").css("background-color", "white");
        $("p" + btn).css("background-color", "yellow");
      });
    });
  </script>
 
</body>

오션, jQuery, first-child, Selector

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

jQuery :first-child Selector

The source of this article

Example

Definition and Usage

Syntax

Example

Example

Example

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

jQuery :first-child Selector

The source of this article

Example

Definition and Usage

Syntax

Example

Example

Example

문서 도구