선택자 중첩
이전까지 소개했던 선택자 여러개를 같이 사용하는 것을 선택자 중첩이라고 합니다.
예시 코드에서 일부 보여드리기도 했었지만, 여기서 다시한번 작성해보겠습니다.
선택자 중첩 사용
사용방법은 간단합니다.
법칙에 맞게 그대로 사용하면 되기 때문입니다.
타입/전체선택자 [속성선택자] :가상클래스 ::가상요소 순으로 적으면 됩니다.
예를 들면
a[target="_blank"]:hover::after 나,
#item:not(li)::selection 처럼 사용합니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a[target="_blank"]:hover::after{
content: '<< CLICK!';
color: indianred;
font-weight: bolder;
}
#item:not(li)::selection{
background-color: gray;
color: white;
}
</style>
</head>
<body>
a[target="_blank"]:hover::after는 아래와 같습니다.<br/>
<a href="https://www.naver.com" target="_blank"> naver </a>
<br/><br/><br/>
#item:not(li)::selection는 아래와 같습니다.<br/>
<div>
<b> 대상 </b>
<p id="item">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium
obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore
hic necessitatibus porro, vitae quia iusto reprehenderit numquam
perferendis distinctio aliquid maxime aut.
</p>
</div>
<div>
<b> 대조군 </b><br/>
<ul> id="item"
<li id="item"> list text </li>
</ul>
</div>
</body>
</html>
실행결과
a[target="_blank"]:hover::after는 아래와 같습니다.naver
#item:not(li)::selection는 아래와 같습니다.
대상
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium obcaecati ratione magni incidunt ipsa voluptatum cupiditate, tempore hic necessitatibus porro, vitae quia iusto reprehenderit numquam perferendis distinctio aliquid maxime aut.
대조군
- id="item"
- list text
이와같이 선택자를 중첩하여 좀 더 세부적인 css 를 작성할 수 있게 됩니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| 화면 구성하기 - flex direction과 다양한 정렬방법 (0) | 2024.10.11 |
|---|---|
| 화면 구성하기 - FlexBox 모델 (0) | 2024.10.09 |
| css 알아보기 - 선택자 : 가상요소 선택자 (0) | 2024.10.07 |
| css 알아보기 - 선택자 : 가상클래스 선택자 (1) | 2024.10.04 |
| css 알아보기 - 선택자 : 속성과 속성선택자 (0) | 2024.10.02 |
