CSS 선택기: 최신 웹 디자인을 위한 고급 선택기 잠금 해제

안녕하세요 여러분! 내 블로그에 오신 것을 환영합니다. ?

소개

오늘은 고급 CSS 선택기의 세계에 대해 알아 보겠습니다. :is(), :where(), :not() 및 :has()와 같은 선택자는 특정 규칙이나 브라우저 지원 문제로 인해 처음에는 약간 까다로워 보일 수 있지만 다음을 위한 매우 강력한 도구입니다. 보다 효율적이고 동적인 CSS를 만듭니다. 이러한 선택기를 함께 살펴보고, 작동 방식을 이해하고, 실제로 작동하는 모습을 살펴보고, 몇 가지 추가 사항에 대해 논의해 보겠습니다.

이 글에서 배울 내용

• 각 선택자 이해 : :is(), :where(), :not(), :has()로 구분합니다.

• 브라우저 지원: 어떤 브라우저가 이러한 선택기를 지원하는지 알 수 있습니다.

• 특수성 통찰력: 이러한 선택자가 CSS 규칙 적용에 미치는 영향

• 실용 사례: 이러한 선택기가 CSS를 어떻게 단순화할 수 있는지 보여주는 실제 사용 사례입니다.

• 모범 사례: 이러한 선택기를 효과적으로 사용하기 위한 팁

? :is() 선택기

:is() 란 무엇인가요?

:is() 의사 클래스 함수를 사용하면 동일한 속성을 반복하지 않고도 여러 선택기에 스타일을 적용할 수 있습니다. 이는 서로 다른 특이성을 지닌 선택자를 그룹화하는 데 특히 유용합니다.

예:

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

결과: 모든 경고 유형에는 특정 클래스에 의해 정의된 색상과 함께 굵은 글꼴과 테두리가 표시됩니다.

?팁: Codepen의 모든 예제를 복사하여 붙여넣어 실제 결과를 확인할 수 있습니다.

? :where() 선택기

:where() 가 무엇인가요?

:is(), :where() 그룹 선택기와 유사하지만 특이도가 0이므로 재정의하기 쉬운 스타일을 만드는 데 이상적입니다.

예:

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

결과:

? :not() 선택기

:not() 이 무엇인가요?

:not() 의사 클래스는 선택 항목에서 특정 요소를 제외하는 데 사용됩니다. 특정 요소나 클래스를 제외한 모든 것에 스타일을 적용하는 데 적합합니다.

예:

• /* Style all list items except those marked as 'done' */
  li:not(.done) {
      background-color: #f0f0f0;
  }
  
  /* Darken the text for completed items */
  li.done {
      color: #888;
  }
  
  

  결과:

  

  ? :has() 선택기

  :has() 가 무엇인가요?

  :has() 의사 클래스를 사용하면 포함된 내용에 따라 요소의 스타일을 지정할 수 있습니다. 이 선택기는 매우 강력하지만 이 글을 쓰는 시점에는 브라우저 지원이 제한되어 있습니다.

  예:
  

  <div>
  
  
  
  
  
  <pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
      font-weight: bold;
      border: 1px solid;
      border-radius: 4px;
  }
  
  .alert.success { border-color: green; }
  .alert.error { border-color: red; }
  .alert.warning { border-color: orange; }
  
  

  <button>
  
  
  
  
  
  <pre class="brush:php;toolbar:false">/* Button styles with low specificity */
  :where(button, input[type="button"], input[type="submit"]) {
      font-size: 1rem;
      padding: 0.5em 1em;
      background-color: #f0f0f0;
      border: none;
      cursor: pointer;
  }
  
  /* Specific override for primary buttons */
  button.primary {
      background-color: #007BFF;
      color: white;
  }
  

  결과:

  

  브라우저 지원

  • :is() 및 :where(): 최신 브라우저는 일반적으로 이를 지원하지만 항상 최신 호환성 데이터를 확인하세요.
  • :not(): 광범위하게 지원되지만 :not() 내부의 복잡한 선택기는 이전 브라우저에서 작동하지 않을 수 있습니다.
  • :has(): 다른 브라우저에서 실험적으로 지원되는 최신 버전의 Safari로 제한됩니다. 더 넓은 호환성을 위해 주의해서 사용하거나 폴리필을 사용하세요.

  특수성 고려사항

  • :is() 및 :where()는 포함된 선택기에서 가장 높은 특이성을 상속하며 :where() 자체는 특이성이 0입니다.
  • :not()의 특이성은 포함된 선택자의 특이성입니다.
  • :has()는 내부 선택기에 따라 달라지므로 복잡한 특이성 문제가 발생할 수 있지만 특이성 점수에 직접적으로 추가되지는 않습니다.

  고급 선택기 사용 모범 사례

  • DRY CSS에 사용 : 이 선택기는 반복을 줄여 CSS를 더 유지 관리하기 쉽게 만듭니다.
  • 성능 고려 : 복잡한 선택자는 성능에 영향을 미칠 수 있으며, 특히 중첩된 선택자는 더욱 그렇습니다.
  • 이전 브라우저를 위한 대체 : :has()를 사용할 때 대체가 있는지 확인하거나 @supports와 함께 기능 쿼리를 사용하세요.
  • 남용 방지 : 강력하지만 선택기를 지나치게 복잡하게 만들지 마십시오. 가독성이 중요합니다.

  실용적 적용

  • 스타일 구성 요소 : 다양한 버튼 클래스 또는 양식 요소 전반에 걸쳐 공통 스타일에 :is() 및 :where()를 사용합니다.

  • 동적 레이아웃 : :has()는 특정 요소가 있으면 상위 요소의 스타일이 변경되는 적응형 레이아웃에 사용할 수 있습니다.

  • 반응형 디자인: 더욱 역동적이고 상황에 맞는 디자인을 위해 이러한 선택기와 미디어 쿼리를 결합합니다.

  결론

  고급 CSS 선택기를 사용하면 스타일시트를 간소화하여 더 깔끔하고 효율적으로 만들 수 있습니다. 특히 :has()에 대한 브라우저 지원을 주시하고 이러한 선택기를 현명하게 사용하여 유지 관리성을 희생하지 않고 CSS를 향상시키세요.

  즐거운 코딩을 즐기시기 바랍니다. CSS를 필요한 만큼 선택적으로 활용하시기 바랍니다! ?

  ---

  ? 안녕하세요. 저는 커뮤니티 매니저개발자, 대중연설가, 콘텐츠 크리에이터

  엘레프테리아입니다.

  ? 이 기사가 마음에 드셨다면 공유해 보세요.

  ? 모든 링크 | X | 링크드인