이번 포스트에서는 CSS 선택자 level 4에 소개된 :not()과 :has() 선택자를 사용해보자. :not(x) https://developer.mozilla.org/en-US/docs/Web/CSS/:not 의미와 사용법 :not(x)는 x에 부합하지 않은 요소를 선택하기 위한 선택자이다. p:not(.classy) { color: red; } body :not(p) { color: green; } Some text. Some other text. One more text 만약 위와 같이 CSS가 적용된 HTML이 있다면 결과는 아래와 같다. 브라우저 호환성 :not()은 현재 사용되는 대부분의 브라우저에서 무리 없이 사용 가능하다. :has(x) https://developer.mozilla.o..
[css]css 가상 클래스 선택자: :not()과 :has()
이번 포스트에서는 CSS 선택자 level 4에 소개된 :not()과 :has() 선택자를 사용해보자. :not(x) https://developer.mozilla.org/en-US/docs/Web/CSS/:not 의미와 사용법 :not(x)는 x에 부합하지 않은 요소를 선택하기 위한 선택자이다. p:not(.classy) { color: red; } body :not(p) { color: green; } Some text. Some other text. One more text 만약 위와 같이 CSS가 적용된 HTML이 있다면 결과는 아래와 같다. 브라우저 호환성 :not()은 현재 사용되는 대부분의 브라우저에서 무리 없이 사용 가능하다. :has(x) https://developer.mozilla.o..
2023.03.05