[css3] 인접 형제 선택자(+) - 제일 가까운 요소에 스타일 적용

1. 개념

인접 형제 선택자(+) - 제일 가까운 요소에 스타일 적용

하나의 부모 요소 아래에 같은 레벨을 형성하는 태그가 있을 경우에는 형제 관계가 성립이 됨
처음에 나오는 요소는 형 , 나중에 나오는 요소는 동생의 관계를 맺게 되는데 + 기호를 사용해서 동생 요소 중 맨 처음으로 오는 요소에만 스타일을 적용할 수 있음

2. 태그

인접 형제 선택자(+)

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > 1 h1 + div { color : blue ; font-weight : bold ; } < /style > < /head > < body > < section id = "test1" > < h1 > 키보드와 하루 < /h1 > < div > 첫번째 div 속성 < /div > < div > 두번째 div 속성 < /div > < div > 세번째 div 속성 < /div > < /section > < /body > < /html >

결과 화면

인접 형제 선택자(+) - 사용예제

코드 설명

1

h1 + div

test1이라는 id를 가진 section 아래에 h1태그와 div 태그를 두었습니다.
현재 h1 태그와 div 태그는 같은 레벨의 요소이며 div 태그는 총 3개를 두었습니다.
여기에서 첫번째 div 태그 , 즉 h1 태그에 가장 가까이 붙어 있는 div 태그에만 스타일을 적용하고자 할 경우에는 + 기호를 이용하게 됩니다.
h1 + div 라고 선언을 하게 되면 h1에 가장 가까이 있는 인접 형제 선택자를 가져와서 스타일을 적용하라고 지정하는 것입니다.
제가 이렇게 선언을 하고 색을 파란색 , 글씨 굵기를 굵게 해서 스타일을 적용해라 라고 정하였고 그래서 결과를 보게 되면 위에 그림과 같이 맨 위에 있는 첫번째 div에만 스타일이 적용된 것을 확인하실 수 있습니다.
중요한 것은 h1과 div는 같은 레벨 위치에 있어야 한다는 것입니다.
그리고 지정한 요소의 가장 가까이 있는 동생 요소에 적용이 된다는 것입니다.
h1이 먼저 선언이 되었기 때문에 이것이 형 요소가 되고 그 뒤로 이어지는 div 요소들이 동생 요소로 자리를 잡게 됩니다.