![[HTML] 동위 선택자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FydYyJ%2FbtrpDKEIGLf%2FAAAAAAAAAAAAAAAAAAAAABqQ1KM4wAQLrsSzSWpq2t7xwlwsECNZkZUqP_gQKqbk%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1769871599%26allow_ip%3D%26allow_referer%3D%26signature%3DVPxHzYf5uDmiwb4sQkUpFDqJoC4%253D)
개념
- 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자
- <li> 태그를 기준으로 할 때 모든 <li> 태그는 동일한 위치에 있는 동위 상태임
- 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택
- 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택
예제 1
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* h1 태그 바로 뒤에 위치하는 h2 태그 color 속성에 red 키워드 적용 */
h1 + h2 { color: red; }
/* h1 태그 뒤에 위치하는 h2 태그 background-color 속성에 orange 키워드 적용 */
h1 ~ h2 { background-color: orange; }
</style>
</head>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
<h2>Header - 2</h2>
</body>
</html>
예제 2
<!--
상태 선택자와 동위 선택자의 복합 활용
-->
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때, 바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용 */
input[type=checkbox]:checked + div {
height: 0px;
}
div {
overflow: hidden;
width: 650px; height: 300px;
/* 변환 효과 적용 */
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
</style>
</head>
<body>
<input type="checkbox" />
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
'HTML > Day39' 카테고리의 다른 글
| [HTML] float 속성 & clear 속성 & overflow 속성 (0) | 2022.01.02 |
|---|---|
| [HTML] 부정 선택자 (0) | 2022.01.02 |
| [HTML] 링크 선택자 (0) | 2022.01.02 |
| [HTML]문자 선택자 (0) | 2022.01.02 |
| [HTML] 문자열 속성 선택자 (0) | 2021.12.29 |