Today I Learned
2021-11-16 TIL
디아_
2021. 11. 16. 15:54
728x90
▪️ 가상 요소 hover 시에 스타일 적용하고 싶을 때 CSS선택자 매번 헷갈린다..
a::after:hover (x)
a:hover::after (o)
a:hover::after
부모 요소 a 태그에 hover 이벤트 발생했을 시after에 특정 스타일 적용
▪️ :first-child 선택자
<body>
<div>
<span>첫번째</span>
<p>두번째</p>
<p>세번째</p>
</div>
</body>
p:first-child{
background-color: #000;
/* div의 첫번째 자식요소는 p 태그가 아닌 span 태그이므로 스타일이 적용 되지 않는다 */
}
p:nth-child(2){
background-color: #000;
color: white;
}
p:last-child{
background-color: #0df;
}
지금까지 내가 이해한 :first-child 선택자는
위의 예시를 들었을 때, p:first-child란 div 안에 자식 요소 중 첫번째 p 태그!
부모 요소 안에 자식 요소로 p 태그를 하나 혹은 여러개 갖고 있다면 p:first-child를 써서 첫번째 p 태그를 선택!
하는 건 줄 알았다😅
그게 아니고
:first-child는 무조건 그냥 부모 요소 안의 첫번째에 있는 자식 요소를 선택하는 거였다
위의 예시에서 첫번째 자식 요소는 span 태그이므로 p:first-child 는 잘못된 선택자이다 유효한 선택자는 span:first-child이다
참고자료
[CSS] before 또는 after 요소가 hover 일 경우에 스타일 적용하기 – 모두의매뉴얼
Intro 이런 상황을 가정 해봅시다. anchor 태그를 이용한 링크 앞에 항상 (Link) 라는 구분자를 달아 주었는데, 사용자가 해당 링크에 마우스를 가져다 대면(hover) 링크의 색깔이 바뀌도록 해두었습니
triki.net
728x90