Codepen에서 :has 챌린지가 뜨길래 :has 셀렉터를 이용한 코드를 만들어봤다.
요소:has() 셀렉터는 그 요소에 특정 하위 요소가 있는지를 찾는다.
태그로 찾을 수도 있고 ex) :has(+p)
클래스 이름으로 찾을 수도 있다 ex) :has(.inner__text)
MDN에 좋은 예제가 있으니 참고하면 좋다.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
:has() - CSS: Cascading Style Sheets | MDN
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a
developer.mozilla.org
See the Pen Transparent card #CodePenChallenge — :has() by nah (@wimmwell) on CodePen.
위의 코드는 :has(.inner__text)를 이용하여 .inner__text 클래스를 가진 .item 요소에만 ::after셀렉터로 텍스트를 추가하고 다른 스타일을 적용했다.
hover 시 효과에도 차이를 줬다.
SCSS 사용!
'Front-end > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] CSS로 텍스트 여러줄에 여백 있는 밑줄을 만드는 여러가지 방법 (multi line underline) (0) | 2023.03.30 |
|---|---|
| [HTML/SCSS] CSS로 ON&OFF 온/오프 스위치 만들기 (input 체크박스) (0) | 2023.02.07 |
| [HTML] Select 박스 옵션 타이틀 항목 나타내기 (0) | 2023.01.02 |
| [HTML/CSS] 입력되는 텍스트 길이에 따라 자동으로 높이가 늘어나는 textarea (0) | 2022.12.29 |
| [HTML/CSS] pure css 원이 퍼지는 마우스오버 애니메이션 효과 (0) | 2022.12.29 |
