CSS pseudo Class

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2021 Apr 21 8:39
Editor
Edited
Edited
2023 Nov 9 13:49
Refs
Refs

가상 선택자 :

CSS pseudo Classes
 
 
 
Surprising Facts About New CSS Selectors
I set out to learn a bit about how CSS nesting works, especially the new & selector, and I ended up on a deep dive into the :is() selector and its siblings.
Surprising Facts About New CSS Selectors
🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()
:where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위해선 각 선택자들을 콤마를 이어 나열하여 표현하여야 했었다. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } 그런데 코드를 보면 a:hover 부분이 각 선택자마다 중복되는 것을 확인 할 수 있을 것이다. 거기다 적용해야할 요소가 많으면 많을 수록 선택자의 양도 늘어나 나중에 ..
🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()
CSS 가상 선택자 :is() 와 :where()
CSS 김영민 F.E.D 2020. 6. 13. 16:22 수 많은 가상 선택자들이 있지만 아직까지 브라우저 환경에서 일부 지원하지 않는 현상 때문에 많이 사용해오지 못하고 있습니다. 점점 많은 css 속성과 환경에 대한 스타일링이 중요시되고 있는 사실은 분명합니다. 이제 가상 선택자 :is()와 :where()가 Safari (Tech Preview 106) 및 Firefox (버전 78)의 미리보기 버전에서 지원됩니다.
CSS 가상 선택자 :is() 와 :where()
 
 
 
 

Recommendations