첫 번째 자식인 CSS 선택기(첫 번째 자식)를 사용하면 첫 번째 요소의 스타일을 다른 요소에 직접 적용할 수 있습니다. CSS 선택기 레벨 3 사양에 따르면 이는 모든 콘텐츠의 스타일을 상위 및 형제 콘텐츠와 관련시키는 방식을 기반으로 하기 때문에 구조적 의사 클래스라고 합니다.
통사론
:first-child { //property } 예
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> 산출
설명:
- 두 개의 div 태그는 위 코드의 본문 블록을 구성합니다.
- 단락 태그가 많습니다.
첫 번째 div 요소 안에 다양한 스냅 태그가 있습니다.
- 헤더 태그와 단락 태그
snap 태그가 있는 태그는 모두 다른 div 태그 내에 포함됩니다.
- 헤드 블록 내부에 내부 또는 내장 CSS를 적용하고 단락 태그 내에 스냅 태그의 스타일을 지정했습니다. 그러나 snap 태그에 대한 클래스를 반드시 생성할 필요는 없습니다. 대신 첫 번째 하위 선택기(p:first-child)를 사용하여 첫 번째 div 태그 내의 첫 번째 스냅 태그 요소를 즉시 식별할 수 있습니다. 초기 요소(스냅)에 스타일을 부여할 수 있습니다. 단락 내에 두 개의 스냅 태그가 있지만 보시다시피 첫 번째 태그에만 스타일이 지정되고 나머지는 무시되었습니다.
- 첫 번째 자식이 어떻게 첫 번째 스냅 태그를 찾고 두 번째 div 태그에서 스타일을 지정했는지 확인할 수 있습니다. 요소는 첫 번째 하위 요소의 대상이 되는 상위 태그 내의 형제 요소 중 첫 번째 요소여야 합니다. 그렇지 않으면 선택되지 않습니다.
사용하여행 태그
행 태그 사용
통사론
tr:first-child{ //CSS declarations with style properties; } 예
더 나은 이해를 위해 행 태그를 사용하는 첫 번째 하위 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를 적용했습니다. 그러나 행 태그에 대한 클래스를 생성할 필요는 없습니다. 대신에 우리는 단순히 테이블 태그 내부의 첫 번째 행 태그 요소를 자동으로 인식하는 첫 번째 하위 선택기(p:first-child)를 사용하고 있습니다. 첫 번째 요소인 행 태그의 스타일을 지정할 수 있습니다. 테이블 내부에는 여러 행의 태그가 있습니다. 그러나 우리가 볼 수 있듯이 첫 번째 태그는 스타일이 지정되고 나머지는 무시됩니다.
결론
우리는 이 글에서 CSS의 첫 번째 자식에 대해 배웠습니다. 기사에서 첫째 아이에 대한 결론은 다음과 같습니다.
- CSS에서 첫 번째 하위(:first-child) 선택기를 사용하면 첫 번째 요소의 스타일을 다른 요소에 즉시 적용할 수 있습니다.
- 첫 번째 자식은 부모 및 형제자매의 콘텐츠와 어떻게 관련되는지에 따라 자료의 스타일을 지정합니다.
- 위치 기반 및 구조 기반 클래스의 멤버인 의사 클래스는 첫 번째 자식입니다. 동일한 유형의 더 많은 형제(요소)를 확인하지 않고 첫 번째 클래스는 부모의 첫 번째 직계 자식과 일치하려고 시도합니다.