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/SCSS/JS] Spliting.js 및 transformation 연습 (0) | 2023.01.30 |
|---|---|
| [HTML/jQuery] input에 포커스 되면 value 지우기 (0) | 2023.01.19 |
| [HTML/jQuery] Input[type="text"]에 숫자만 입력하기 (0) | 2023.01.02 |
| [HTML] Select 박스 옵션 타이틀 항목 나타내기 (0) | 2023.01.02 |
| [HTML/CSS] 입력되는 텍스트 길이에 따라 자동으로 높이가 늘어나는 textarea (0) | 2022.12.29 |
