[CSS] :only-child :only-of-type 가상 클래스(의사 클래스)

:only-child

• 지정 요소가 부모의 유일한 자식 요소인 경우
• 다르게 말해서 부모의 자식 요소가 지정 요소 하나만 있는 경우에 적용이 된다.

 

---

:only-of-type

• 지정 요소가 부모의 자식 요소중 동일한 타입이 없는 경우
• 부모의 자식 요소 중 다른 타입의 형제 요소들은 있어도 상관없다.

 

---

CSS

.parents div:only-child {
  background-color: green;
  color: #fff;
}

.parents p:only-child {
  background-color: gray;
  color: #fff;
}

.parents p:only-of-type {
  text-decoration: underline;
  font-style: italic;
}

HTML

<div class="parents">
  <div>1. parents의 자식이 오직 <div> 하나이므로 only-child 적용</div>
</div>

<div class="parents">
  <p>2. parents의 자식요소중 유일한 <p>태그이므로 only-child, only-of-type 적용</p>
</div>

<div class="parents">
  <div>3. parents의 자식이 <div>와 <p>가 있으므로 only-child 무시</div>
  <p>3. parents의 자식요소중 유일한 <p>태그이므로 only-of-type 적용</p>
</div>

<div class="parents">
  <div>4. parents의 자식이 <div> 2개 이므로 only-child 무시</div>
  <div>4. parents의 자식이 <div> 2개 이므로 only-child 무시</div>
</div>

<div class="grandparents">
  <div class="parents">
    5. 일반 텍스트
    <div>5. grandparents 자식의 parents의 자식이 <div> 하나이므로 only-child 적용</div>
  </div>
</div>

결과

1. parents의 자식이 오직 <div> 하나이므로 only-child 적용

2. parents의 자식요소중 유일한 <p>태그이므로 only-child, only-of-type 적용

3. parents의 자식이 <div>와 <p>가 있으므로 only-child 무시

3. parents의 자식요소중 유일한 <p>태그이므로 only-of-type 적용

4. parents의 자식이 <div> 2개 이므로 only-child 무시

4. parents의 자식이 <div> 2개 이므로 only-child 무시

5. 일반 텍스트

5. grandparents 자식의 parents의 자식이 <div> 하나이므로 only-child 적용