CSS 부모 요소를 선택할 수 있는 :has() 선택자
최근 티스토리 댓글/방명록 태그 구조가 싹 다 물갈이 되면서 친효스킨도 그에 발 맞추어 업데이트를 해야만 했습니다. 신형 댓글/방명록 시스템에는 고정 기능이 있습니다. 즉 마음에 드는 댓글(방명록)을 제일 상단으로 끌어올려 고정을 할 수 있는 기능입니다. 이건 유튜브나 인스타그램에서도 이미 진행중인 기능이죠. 고정 댓글이라고 부르는 그것입니다. 이 시스템이 티스토리에도 도입된 것입니다.
하지만 티스토리 댓글/방명록 중에서 마음에 들지 않는 딱 하나가 있는데 바로 배치 순서입니다. 댓글을 남길 수 있는 대부분의 플랫폼이 그러하듯 최신 댓글이 아래로 쌓여가는 구조입니다. 티스토리도 그러했습니다. 허나 저는 최신 댓글일수록 위로 쌓여야 한다고 생각합니다. 그래야 열람도 더 빠를테니까요. 그래서 신형 댓글(방명록)의 HTML 구조를 살펴봤습니다.
사건 개요
<ul class="tt-list-reply">
<li>고정댓글</li>
<li>이전 댓글 더 보기</li>
<li>댓글1</li>
<li>댓글2</li>
<li>댓글3</li>
</ul>크롬 개발자 툴로 살펴보니 이런 구조를 갖추고 있었습니다. 댓글3이 가장 최신 댓글입니다. 댓글 뒤 숫자가 높을수록 최신 댓글이라고 이해하시면 됩니다. 이런 배치 순서를 역순으로 만들면 최신 댓글이 상단으로 오게 될 겁니다. 그래서 li의 부모 요소인 ul.tt-list-reply에 아래의 옵션을 추가해 주었습니다.
display: flex;
flex-direction: column-reverse;이렇게 하면 세로로 역순이 됩니다. 이제 최신 댓글이 가장 위로 오게 되었는데 다른 문제가 발생하게 됩니다. 일단 이렇게 flex를 적용한 ul의 태그 구조를 살펴봅시다.
<ul class="tt-list-reply">
<li>댓글3</li>
<li>댓글2</li>
<li>댓글1</li>
<li>이전 댓글 더 보기</li>
<li>고정댓글</li>
</ul>이런 형태가 될 것입니다. 그러면 어떤 문제가 생겼는지 확실히 보이실 겁니다. 그렇습니다. 고정 댓글이 이번에는 맨 하단으로 빠지는 문제가 발생합니다. 따라서 이 문제를 해결해야만 했습니다.
처음에는 제이쿼리를 사용해서 ul의 마지막 li 태그를 강제로 맨 위로 보내도록 시도해 보았습니다. 이렇게하면 문제가 해결이 되겠지만 고정댓글이 없는 경우가 또 말썽을 일으킵니다. 고정 댓글을 지정하지 않으면 이전 댓글 더 보기가 가장 마지막 li 태그가 됩니다. 그러면 이전 댓글 더 보기가 맨 위로 올라오는 문제가 발생합니다. 따라서 고정 댓글만 정확히 선택할 수 있는 선택자가 필요했습니다. 그렇게 열심히 구글링을 하다보니 :has 선택자를 알게 된 것입니다.
:has() 선택자
잠시 영어 공부를 해볼까요? 참고로 저 영어 못합니다. 단지 학창 시절에 기초 영어 정도는 기억하고 있는데 그걸 이 과정에서 써먹게 되네요. HAVE 라는 단어는 많이 들어보셨을 겁니다. 뜻은 ~을 가지다 라는 의미입니다. HAS는 3인칭 주어에 사용되는 have의 또 다른 형태죠. 뜻은 같아요.
- I have a 어쩌구
- You have a 저쩌구
- She has a 얼씨구
- He has a 절씨구
즉 have 가 has인 것입니다. 이런 영문법의 성격을 HTML 생태계에서 물려받았는지는 몰라도 이런 상황이기에 have 대신 has를 사용하는게 아닐까라는 생각이 듭니다. 개발자는 서양인이니까요. 영어권 문화가 그대로 웹 언어에도 묻을 수 밖에 없었을 겁니다. 즉 has는 가지고 있다라는 뜻을 내포했다고 해석하면 좋습니다. 현재 친효스킨에서는 :has 선택자를 이렇게 사용했습니다.
li.tt-item-reply:has(p.tt_cmt_info) {
order: 1;
}자! 이게 무슨 의미일까요? 일단 선택자 구조는 다 알텐데 :has 부분만 잘 모르실겁니다. 의미는 이렇습니다.
tt_cmt_info 라는 클래스명을 가진 p태그의 부모 요소인 tt-item-reply 클래스명을 가진 li 태그를 선택하여 order: 1 이라는 옵션을 추가하겠다.
이런 뜻이 됩니다.
크롬 개발자 툴로 고정 댓글의 태그 구조를 살펴본 결과 li 태그들 중 유일하게 자식 요소에 p 태그가 존재했습니다. 그래서 고정 댓글을 담당하는 li 태그만 단독으로 선택할 수 있는 상황이 연출되었습니다. 만약 고정 댓글이 없는 경우에는 li 태그 중 p태그를 가진게 아무것도 없게 되겠죠? 따라서 위에서 보여드린 li.tt-item-reply:has(p.tt_cmt_info) 선택자가 무용지물이 됩니다. 즉 :has 선택자를 사용함으로서 고정 댓글의 경우에만 CSS 효과가 발생하도록 만들 수 있는 것입니다. 참고로 order 옵션에 대해서는 이미 한 차례 강좌를 한 바 있으므로 아래의 글을 참고하시기 바랍니다.
:has() 선택자 사용 방법
사용 방법은 어렵지 않습니다. 괄호 안에 타겟으로 삼을 자식 요소를 입력하면 됩니다. 아래는 예시입니다.
/* li 요소가 자손으로 p 요소를 가지고 있을 경우 선택 */
li:has(p) {
}
/* li 요소가 1대 자식으로 p 요소를 가지고 있을 경우 선택 */
li:has(> p) {
}
/* li 요소가 형제 태그로 p 요소를 가지고 있을 경우 선택 */
li:has(+ p) {
}
/* li 요소가 인접하는 태그로 p 요소를 가지고 있을 경우 선택 */
li:has(~ p) {
}
/* li 요소가 자손으로 p 요소와 button 요소를 둘 다 가지고 있을 경우 선택 */
li:has(p, button) {
}기존에 알고 계시는 다양한 CSS 선택 문법을 그대로 사용할 수 있습니다.
:has() 선택자 지원 브라우저
":has()" | Can I use... Support tables for HTML5, CSS3, etc
:has() CSS relational pseudo-class Select elements containing specific content. For example, `a:has(img)` selects all `<a>` elements that contain an `<img>` child.
caniuse.com
이 글을 작성하는 날짜는 2023년 6월 12일입니다. 현재까지는 파이어폭스 브라우저를 제외한 대부분의 최신 버전 브라우저에서 :has() 선택자를 지원하고 있습니다. 너무 최신 선택자여서 모든 브라우저가 완벽하게 지원하지 않고 있지만 시간이 흐르면서 점차 많은 브라우저에서 사용이 될 것으로 기대합니다.
미지원 브라우저의 경우 대처 방법
실제로 친효스킨을 파이어폭스 브라우저에서 살펴보면 댓글이 flex에 대한 부분만 적용되어 있음을 확인했습니다. :has 선택자를 사용할 수 없으니 아직 미지원의 경우에는 다시 원래대로 형태를 되돌리는게 낫겠다고 판단하여 아래의 방법을 친효스킨 CSS에 적용시켰습니다.
@supports not (selector(:has(*))) {
.tt-comment-cont > .tt-area-reply > .tt-list-reply {
flex-direction: column;
}
}:has()가 적용된 모든 선택자가 미지원인 경우에는 flex-direction을 다시 기본값인 column 상태로 되돌린다는 의미입니다. 이렇게 해놓으면 has 미지원 브라우저는 티스토리의 원래 댓글/방명록 순서로 보여지게 됩니다.
참고로 selector 라는 부분은 선택자라는 뜻으로 알고 있는데 실제 티스토리 댓글/방명록에 사용되는 li 태그를 직접 입력해서 적용시키려 했더니 오류가 발생하더라고요. 다시 원래대로 selector 라고 입력하니 정상 동작하고요. selector가 그냥 고유명사처럼, 그러니까 근의 공식마냥 그냥 그대로 사용해야하는 키워드인건지, 대명사인건지 정확히 알 수는 없지만 분명한건 selector 라는 단어 대신 특정 태그명을 사용하니 오류가 뜬다는 점입니다. 근데 이 부분은 제가 제대로 사용하지 못해서 발생하는 문제일 수 있어요. 여러분들도 한번 직접 테스트해 보시기 바랍니다. 끝.
