반응형
CSS에서 인접 선택자는 기준이 되는 요소의 바로 다음에 나오는 요소를 선택하는 선택자입니다.
선택자 사이에 +를 이용해 인접 선택자를 사용할 수 있습니다.
아래의 코드에서 h1 + p를 사용해 h1 바로 뒤에 있는 p태그만 선택해보겠습니다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 + p {color:tomato;}
</style>
</head>
<body>
<h1>인접선택자</h1>
<p>바로 다음 요소만 스타일이 표시됩니다.</p>
<p>바로 다음 요소만 스타일이 표시됩니다.</p>
<h1>인접선택자</h1>
<p>바로 다음 요소만 스타일이 표시됩니다.</p>
<p>바로 다음 요소만 스타일이 표시됩니다.</p>
</body>
위의 상황에서 인접 선택자를 사용하면 p태그 4개 중에서 h1태그 바로 다음에 있는 p태그 2개만 선택됩니다.
h1 바로 뒤에 있는 p태그만 스타일이 선언되어 토마토 색으로 변경되었습니다.
반응형
'코딩 > CSS' 카테고리의 다른 글
| [CSS] 글자에 테두리 넣는 방법 텍스트에 스트로크 넣는 방법 (0) | 2025.04.14 |
|---|---|
| 반응형 웹 사이트를 구현하는 방법 (0) | 2024.01.10 |
| [CSS] css만 사용해 체크 박스로 토글 버튼 만들기 (0) | 2022.11.04 |
| [CSS3]가상 요소 선택자 (pseudo-element) 정리 (0) | 2021.12.07 |
댓글