CSS : 첫 번째 자식 선택기
예시
부모의 첫 번째 자식인 모든 <p> 요소를 선택하고 스타일을 지정합니다.
p:first-child
{
background-color: yellow;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
:first-child
선택기는 부모의 첫 번째 자식인 경우에만 지정된 선택기를 선택하는 데 사용됩니다 .
버전: | CSS2 |
---|
브라우저 지원
표의 숫자는 선택기를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Selector | |||||
---|---|---|---|---|---|
:first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
CSS 구문
:first-child {
css declarations;
}
더 많은 예
예시
모든 <p> 요소의 모든 <i> 요소를 선택하고 스타일을 지정합니다. 여기서 <p> 요소는 상위 요소의 첫 번째 자식입니다.
p:first-child i
{
background: yellow;
}
예시
목록에서 첫 번째 <li> 요소를 선택하고 스타일을 지정합니다.
li:first-child
{
background: yellow;
}
예시
모든 <ul> 요소의 첫 번째 자식 요소를 선택하고 스타일을 지정합니다.
ul > :first-child
{
background: yellow;
}
관련 페이지
CSS 튜토리얼: CSS 의사 클래스