CSS 외동딸

첫 번째 자식, 마지막 자식, n번째 자식이 있습니다. 당신이 외동이라면 어떨까요? 모든 사람이 형제자매가 있는 것은 아닙니다. 걱정하지 마세요. CSS가 지원해 드립니다 🤗. 형제가 없는 요소의 스타일을 지정하려면 :only-child 의사 클래스 선택기 👩‍👧를 사용하세요.

HTML

<ul>
  <li>I'm the only child👩‍👧</li>
</ul>

<ul>
  <li>I have siblings👩‍👧‍👧</li>
  <li>I have siblings👩‍👧‍👧</li>
</ul>

CSS

li:only-child {
  color: DeepPink;
}

산출

대체 솔루션

또는 다른 자식 선택자를 사용하여 이 "유일한 자식"을 달성할 수도 있습니다.

:first-child 및 :last-child 사용

이것은 또한 유일한 자식을 선택합니다.

li:first-child:last-child {
  color: DeepPink;
}

:nth-child 및 :nth-last-child 사용

li:nth-child(1):nth-last-child(1) {
  color: DeepPink;
}

차이점이 뭐야?

따라서 대체 솔루션을 사용하는 것과 :nth-child의 차이점은 후자가 더 낮은 특이성을 갖는다는 것입니다.

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

w3schools.com: CSS Specificity

특이성 전투 ⚔️

이 예를 살펴보겠습니다. only-child는 특이성이 낮기 때문에 표시되는 텍스트 색상은 파란색입니다.

li:first-child:last-child {
  color: blue; /* 👈 This will win */
}

li:only-child {
  color: DeepPink;
}

그리고 우리가 그들 모두와 싸우면. 이 :first-child:last-child 는 :nth-child(1):nth-last-child(1) 와 동일한 특이성을 가지므로 마지막에 오는 것이 승자가 되는 규칙이 됩니다. 우리의 경우 :nth-child(1):nth-last-child(1)가 뒤에 나타나므로 나타날 텍스트 색상은 녹색이 됩니다.

li:first-child:last-child {
  color: blue;
}

li:nth-child(1):nth-last-child(1) {
  color: green; /* 👈 This will win */
}

li:only-child {
  color: DeepPink;
}

유일한 자식 대 유일한 유형

개별적으로 설명하는 것으로 시작하겠습니다.
:only-child 부모의 유일한 자식인 요소만 선택합니다. 이는 해당 부모 내에서 하나의 요소만 의미합니다. 다른 요소 유형이더라도 유일한 자식으로 간주되지 않습니다. 하나의 요소, 예외 없음!
:only-of-type 부모 내 특정 유형의 유일한 자식인 경우에만 요소를 선택합니다. 따라서 다른 유형의 다른 형제 자매를 갖는 것은 좋습니다.

이제 설명이 끝났습니다. 몇 가지 예를 살펴보겠습니다.

예: 외동아들

여기 쉬운 것이 있습니다. <p>는 부모<div> 요소의 유일한 자식이므로 기준에 맞습니다.

<div>
  <p></p> <!-- p:only-child -->
</div>

예: NOT only-child

하지만 이제 문제가 생겼습니다. 부모<div>에는 2명의 자식이 있습니다. 따라서 :only-child를 선택자로 사용하면 아무 것도 선택되지 않습니다.

<!-- ⚠️ p:only-child ➡️ no element selected -->
<div>
  <h1></h1>
  <p></p>
</div>

예: 유형만

그러나 :only-of-type 를 사용했다면 괜찮습니다. 우리의 부모<div>에게는 2명의 자녀가 있지만. <p>는 여전히 해당 특정 유형의 유일한 자식으로 남아 있습니다. 이 경우 우리 <p>는 우리 아이들의 유일한 유형입니다. 따라서 유일한 유형이라는 기준을 충족하므로 선택됩니다.

<div>
  <h1></h1>
  <p></p> <!-- p:only-of-type -->
</div>

다른 유사한 CSS 의사 클래스

다음은 다른 유사한 CSS 의사 클래스입니다.

:first-child 및 :first-of-type

:last-child 및 :last-of-type

:nth-child 및 :nth-of-type

이전 코드 노트에서 :first-child 및 :first-of-type를 다루었습니다. 끝 부분에서 아래로 스크롤하여 읽어보세요 🤓

CSS Not Selector

브라우저 지원

Internet Explorer를 포함하여 꽤 잘 지원됩니다!

Browser Support: only-child

업데이트: CSS 선택기 4의 유일한 자식

이 업데이트도 포함하고 싶습니다. CSS 선택기 레벨 4 작업 초안에 있습니다.

Matching elements are not required to have a parent.

MDN Web Docs

그렇다면 외동아이가 부모 요소 없이 존재할 수 있다는 뜻인가요🤔 자세한 내용은 잘 모르겠습니다😅. 그러나 이것이 무엇인지 알고 있다면 더 많은 것을 배울 수 있도록 댓글에 남겨주세요. 그들이 말하는 것을 알다시피, 공유는 배려입니다 🤗

커뮤니티 입력

: :empty도 매우 유용합니다 😊 요소에 하위 요소가 없는 경우에만 적용됩니다.

: 공정한 경고:empty

<i></i> <!-- empty -->
<i><!-- not empty --></i>
<i><b hidden>not empty</b></i>
<i> </i><!-- not empty (white space)

첫째 자녀 vs 외동 자녀

: only-child 대신 first-child를 사용하는 이유는 무엇입니까? 그들은 똑같은 일을 하지 않습니까?

: 음, first-child가 항상 유일한 아이는 아닙니다 😉

: 네, 하지만 아이가 한 명만 있으면 first-child도 작동합니다.

: 예, 하지만 더 많은 요소가 있는지 여부에 관계없이 모두:first-child에 적용됩니다 😊

자원

MDN Web Docs: only-child

codrops: only-child

CSS Tricks: only-child

CSS Tricks: only-of-type

w3schools: only-child

w3schools: only-of-type

읽어주셔서 감사합니다 ❤
안녕하세요! | | Facebook | Medium | Blog