[작업 일기] jquery사용시 가상클래스(::after ::before) 선택 불가

  가상클래스 ::after를 사용하였는데 jQuery에서 선택이 안된다ㅠ.ㅠ 그래서 찾아보다가 아래와 같이 사용할 수 있다는 걸 알았다. 하지만 이마저도 ie11이상의 브라우저만 지원한다고 한다. 이외에도 몇가지 방법이 있었지만, 좋은 방법인지 모르겠다. 코드 사용도 늘어나고... 그냥!!  jQuery쓸거면 왠만하면 가상클래스는 사용하지 않는게 좋을 것 같다는 생각이다.

active를 다른 곳에 걸어주고 사용하는 걸로 간단하게 해결됐다.(바보ㅠ) 그래도 jquery사용시 가상클래스를 범위로 선택하면 안된다는 것을 알게 됐다.

---

 

<div id="parent">
  부모 영역
</div>

#parent {
  width: 200px;
  height: 200px;
  position: relative;
  background: #f1f1f1;
  pointer-events: none;
}

#parent:after {
  content: '가상선택자 영역';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  color: #fff;
  top:0;
  left:100%;
  pointer-events: all;
}

document
   .querySelector('#parent')
   .addEventListener('click', e => e.target.innerText += `클릭이벤트 발생`);