안녕하세요, 훌륭한 개발자 여러분! 이번 포스팅에서는 활용법을 알아보겠습니다. :has() 다음 웹 프로젝트에서. :has() 비교적 새롭지만 UI의 다양한 요소에 대한 제어 기능을 제공하여 프런트 엔드 커뮤니티에서 인기를 얻었습니다. 의사 클래스(Pseudo Class)가 무엇인지, 어떻게 활용할 수 있는지 살펴보겠습니다.

통사론

XNUMXD덴탈의 :has() CSS 의사 클래스는 우리가 내부에서 검색하는 항목이 발견되고 고려되는 경우 요소의 스타일을 지정하는 데 도움이 됩니다. 다음과 같이 말하는 것과 같습니다. "이 상자 안에 특정한 것이 있다면 상자 스타일을 이 방식으로, 그리고 이 방식으로만 지정하세요."

:has(<direct-selector>) {
  /* ... */
}

스타일링 문제

지난 몇 년 동안 우리는 CSS를 사용하여 해당 부모의 직계 자식을 기반으로 하는 부모 요소나 다른 요소를 기반으로 하는 요소의 스타일을 지정할 수 있는 방법이 없었습니다. 그렇게 해야 할 경우 일부 JavaScript를 사용하고 HTML 구조에 따라 클래스를 켜거나 꺼야 합니다. :has() 그 문제를 해결했습니다.

제목 수준 1 요소(h1) 이는 블로그 목록 페이지에 있는 게시물의 제목이나 그와 유사한 제목이며, 제목 레벨 2(h2) 바로 뒤에 나오는 내용입니다. 이 h2는 게시물의 부제목이 될 수 있습니다. 그렇다면 h2 존재하고, 중요하며, 그 직후에 h1, h1을 눈에 띄게 만들고 싶을 수도 있습니다. 이전에는 JS 함수를 작성해야 했습니다.

올드스쿨 웨이 – 자바스크립트

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

이 JS 함수는 h2 이를 진행하고 하이라이트 콘텐츠 클래스를 적용하여 h1 중요한 기사로 눈에 띕니다.

최신 CSS가 새롭게 등장하고 개선되었습니다! 브라우저에서 수행할 수 있는 기능이 크게 향상되었습니다. 이제 우리는 CSS를 활용하여 전통적으로 JavaScript와 관련된 작업을 수행할 수 있습니다. 전부는 아니지만 몇 가지 작업을 수행할 수 있습니다.

뉴 스쿨 웨이 – CSS

h1:has(+ h2) {
    color: blue;
}

:has()를 던져보세요!

이제 사용할 수 있습니다. :has() JS 함수와 동일한 작업을 수행합니다. 이 CSS는 h1을 확인하고 형제 결합자 바로 뒤에 오는 h2를 확인하고 텍스트에 파란색을 추가합니다. 다음은 몇 가지 사용 사례입니다. :has() 도움이 될 수 있습니다.

:선택기 있음 예 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:선택기 있음 예 2

웹상의 작업자로서 우리는 이미지를 조작하거나 작업하는 경우가 많습니다. 우리는 다음과 같은 도구를 사용할 수 있습니다. 구름이 많은 이미지에 다양한 변형을 활용하는 기능을 제공하지만 일반적으로 그림자, 테두리 반경 및 캡션을 추가하려고 합니다(alt 속성의 대체 텍스트와 혼동하지 마세요).

아래 예에서는 :has() 그림이나 이미지에 figcaption 요소가 있는지 확인하고, 그렇다면 배경과 테두리 반경을 적용하여 이미지를 돋보이게 만듭니다.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

내가 할 수 있을까? :has() 그?

당신은 그것을 볼 수 있습니다. :has() 최신 브라우저 전반에 걸쳐 뛰어난 지원을 제공합니다.

:has() 커뮤니티에서!

나는 내 동료들이 어떻게 사용하고 있는지 알아보기 위해 트위터 네트워크에 연락했습니다. :has() 그들의 일상 업무에서 이것이 그들이 그것에 대해 말해야 했던 것입니다.

svg:has(> #Mail) {
  stroke-width: 1;
}

커뮤니티 회원들이 현대 CSS를 사용하여 실제 문제를 해결하는 방법을 확인하고 Abbey가 접근성을 위해 이를 사용하고 있다는 사실을 알게 되어 기쁩니다!

마음 속에 간직 할 물건

사용할 때 명심해야 할 몇 가지 핵심 사항이 있습니다. :has() 다음에서 참조한 글머리 기호 MDN.

• 의사 클래스는 인수에서 가장 구체적인 선택자의 특이성을 취합니다.
• 경우 :has() 의사 클래스 자체는 브라우저에서 지원되지 않습니다. 그렇지 않으면 전체 선택기 블록이 실패합니다. :has() 다음과 같이 허용되는 선택기 목록에 있습니다. :is() 과 :where()
• XNUMXD덴탈의 :has() 의사 클래스는 다른 클래스 내에 중첩될 수 없습니다. :has() 
• 의사 요소도 유효한 선택자가 아닙니다. :has() 의사 요소는 유효한 앵커가 아닙니다. :has()

결론

다음과 같은 고급 기능을 포함하여 CSS의 강력한 기능을 활용합니다. :has() 가상 클래스는 우리가 뛰어난 웹 경험을 만들 수 있도록 해줍니다. CSS의 강점은 연속성과 특수성에 있습니다. 가장 좋은 점은 CSS의 잠재력을 최대한 활용할 수 있다는 것입니다. CSS의 기능을 수용함으로써 웹 디자인과 개발을 발전시켜 새로운 가능성을 열고 획기적인 사용자 인터페이스를 만들 수 있습니다.

모래밭:

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
• PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 플라톤ESG. 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
• PlatoHealth. 생명 공학 및 임상 시험 인텔리전스. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/the-power-of-has-in-css/