logo

TechCodeview

CSS 첫 번째 자식

첫 번째 자식인 CSS 선택기(첫 번째 자식)를 사용하면 첫 번째 요소의 스타일을 다른 요소에 직접 적용할 수 있습니다. CSS 선택기 레벨 3 사양에 따르면 이는 모든 콘텐츠의 스타일을 상위 및 형제 콘텐츠와 관련시키는 방식을 기반으로 하기 때문에 구조적 의사 클래스라고 합니다.

통사론 

 :first-child { //property }

예 

 h1:first-child { color: blue; } <p> <span>Let&apos;s get started</span></p>

산출

CSS 첫 번째 자식

설명:

  1. 두 개의 div 태그는 위 코드의 본문 블록을 구성합니다.
  2. 단락 태그가 많습니다.

    첫 번째 div 요소 안에 다양한 스냅 태그가 있습니다.

  3. 헤더 태그와 단락 태그

    snap 태그가 있는 태그는 모두 다른 div 태그 내에 포함됩니다.

  4. 헤드 블록 내부에 내부 또는 내장 CSS를 적용하고 단락 태그 내에 스냅 태그의 스타일을 지정했습니다. 그러나 snap 태그에 대한 클래스를 반드시 생성할 필요는 없습니다. 대신 첫 번째 하위 선택기(p:first-child)를 사용하여 첫 번째 div 태그 내의 첫 번째 스냅 태그 요소를 즉시 식별할 수 있습니다. 초기 요소(스냅)에 스타일을 부여할 수 있습니다. 단락 내에 두 개의 스냅 태그가 있지만 보시다시피 첫 번째 태그에만 스타일이 지정되고 나머지는 무시되었습니다.
  5. 첫 번째 자식이 어떻게 첫 번째 스냅 태그를 찾고 두 번째 div 태그에서 스타일을 지정했는지 확인할 수 있습니다. 요소는 첫 번째 하위 요소의 대상이 되는 상위 태그 내의 형제 요소 중 첫 번째 요소여야 합니다. 그렇지 않으면 선택되지 않습니다.

사용하여행 태그

행 태그 사용, CSS의 첫 번째 자식을 적용할 수 있습니다. 결과적으로 첫 번째 하위 선택기를 사용하여 행 태그에 스타일을 적용하면 첫 번째 행 태그에만 스타일이 적용되고 나머지 행 태그에는 스타일이 적용되지 않습니다. 첫 번째 하위 항목은 상위 태그 내의 첫 번째 행 요소를 대상으로 하며 나머지는 무시됩니다.

통사론 

 tr:first-child{ //CSS declarations with style properties; }

예

더 나은 이해를 위해 행 태그를 사용하는 첫 번째 하위 CSS의 예를 살펴보겠습니다.CSS에서.

 Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table>

산출

CSS 첫 번째 자식

설명:

  1. 위 코드의 본문 블록에는 학생 정보에 대한 테이블 태그가 포함되어 있습니다..
  2. 여러 행의 태그가 있습니다.테이블 태그 내부, 첫 번째 행 태그에는 학생의 출석 번호, 이름, 성적과 같은 헤더가 있습니다. 학생의 데이터는 나머지 행 태그에 포함되어 있습니다.
  3. 행 태그 스타일 지정테이블 태그 내부, 헤드 블록 내부에 내부 또는 내장 CSS를 적용했습니다. 그러나 행 태그에 대한 클래스를 생성할 필요는 없습니다. 대신에 우리는 단순히 테이블 태그 내부의 첫 번째 행 태그 요소를 자동으로 인식하는 첫 번째 하위 선택기(p:first-child)를 사용하고 있습니다. 첫 번째 요소인 행 태그의 스타일을 지정할 수 있습니다. 테이블 내부에는 여러 행의 태그가 있습니다. 그러나 우리가 볼 수 있듯이 첫 번째 태그는 스타일이 지정되고 나머지는 무시됩니다.

결론

우리는 이 글에서 CSS의 첫 번째 자식에 대해 배웠습니다. 기사에서 첫째 아이에 대한 결론은 다음과 같습니다.

  1. CSS에서 첫 번째 하위(:first-child) 선택기를 사용하면 첫 번째 요소의 스타일을 다른 요소에 즉시 적용할 수 있습니다.
  2. 첫 번째 자식은 부모 및 형제자매의 콘텐츠와 어떻게 관련되는지에 따라 자료의 스타일을 지정합니다.
  3. 위치 기반 및 구조 기반 클래스의 멤버인 의사 클래스는 첫 번째 자식입니다. 동일한 유형의 더 많은 형제(요소)를 확인하지 않고 첫 번째 클래스는 부모의 첫 번째 직계 자식과 일치하려고 시도합니다.