first, last, only-child CSS

See the Pen :first, last-child by nilgi (@nilgi) on CodePen.

 

 

<style type="text/css">
  p:first-child {
    background: gold;
  }
  p:last-child {
    background: gray;
    color: white;
  }
</style>

<h1>first-child</h1>
<h3>첫번째 자식요소 선택</h3>
<h1>last-child</h1>
<h3>마지막 자식요소 선택</h3>
<div>
  <p>1번 자식</p>
  <p>2번 자식</p>
  <p>3번 자식</p>
  <p>4번 자식</p>
  <p>5번 자식</p>
</div>

 

 

See the Pen only-child by nilgi (@nilgi) on CodePen.

 

 

<style>
  p:only-child {
    background: gold;
  }
</style>

<h1>only-child</h1>
<h3>자식 요소가 유일하게 하나일 때. 다른 어떠한 자식 요소가 없어야 적용</h3>
<div>
  <p>유일한 p 자식 요소</p>
</div>
<div>
  <h3>h3 자식요소</h3>
  <p>p 자식요소</p>
</div>