[CSS] 처음과 마지막의 자식 요소에 스타일을 적용하는 가상(擬似)클래스 first-child와last-child

어떤 요소가 다른 요소의 처음의 자식 요소가 된 경우에, 그것에 스타일을 적용할 수 있습니다.

예를 들어, 목록의 첫 번째 항목에만 적용한다든가, 첫 번째 단락에만 스타일을 지정하는 경우 등에 사용됩니다.

:first-child

요소 이름: first-child { 속성 이름 : 속성 값; }

 #sample{margin-bottom:2.5em;}
 #sample ul{}
 #sample ul li{
	border: 1px solid #666;
	margin-bottom: 2px;
	line-height:1.5em;}
 
#sampling ul li:first-child {
	border-radius: 2px;
	padding-top: 6px;
	background-color:#F98B00;
	color:#F8F8F8;}

#sampling ul li:last-child {
	border-radius: 2px;
	padding-top: 6px;
	background-color:#F99;}

first-line 가상 요소는 화면 사이즈의 변경이 있는 경우에는 1 행의 폭이 변화하면 그에 따라 적용 범위가 달라집니다.

이를 통해 자동으로 "장식되어있는 첫 번째 줄"도 바뀝니다.

스폰서 링크

:last-child

요소 이름:last-child { 속성 이름 : 속성 값; }

.sentence{
	line-height:1.5em;
	margin-bottom:2.5em;}
 p:first-child {
	font-style: italic;
	background-color:#9A9595;}
 p:last-child {
	color:#F15301;
    font-size: 0.8em;
    font-style: italic;
}

HTML

<div class="sentence">
  <p>We used to ... overestimate.</p> 
  <p>The conscious ... brainpower.</p>
  <p>They didn't ...  clothes.</p>
</div>

We used to think that you could pay attention to five to nine things at a time," he added. "We now know that's not true. That's a crazy overestimate.

The conscious mind can attend to about three things at once. Trying to juggle any more than that, and you're going to lose some brainpower."

They didn't want to waste valuable energy making inconsequential decisions about their clothes.

:first-child / :last-child

<li> 요소 n의 처음에 나오는 선택자에 적용시킵니다. : nth-child (1)과 동일합니다.

  li:first-child{
    border-radius:3px;
    box-shadow:inset 0 2px 45px #ffbc07;
    }
  li:last-child{
    border-radius:3px;
    box-shadow:inset 0 2px 45px #fd0303;}

스폰서 링크