You are on the editable version of MDN Web Docs

MDN 웹 문서 사용자로 보기: https://developer.mozilla.org/ko/docs/Web/CSS/:first-child

CSS :first-child 의사 클래스는 형제 요소 중 제일 첫 요소를 나타냅니다.

/* Selects any <p> that is the first element
   among its siblings */
p:first-child {
  color: lime;
}

참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.

구문

:first-child

예제

기본 예제

HTML

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

CSS

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

결과

목록 스타일링

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

결과

명세

Specification Status Comment
Selectors Level 4
The definition of ':first-child' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':first-child' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of ':first-child' in that specification.
Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:first-childChrome Full support 4Edge Full support 12Firefox Full support 3IE Full support 7
Notes
Full support 7
Notes
Notes Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.
Notes In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the :first-child style isn't applied until the link loses focus.
Opera Full support 9.5Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4Samsung Internet Android Full support 1.0
Matches elements with no parentChrome Full support 57Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 52Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, ShihwanKim
최종 변경자: alattalatta,