[선택자] CSS - 인접 선택자 (요소+요소) : (IE7) ★★★

2014-01-28 (화) 16:55 4년전 1,315

CSS 인접 선택자 (요소+요소) : CSS2 (익스7 이상 주요 브라우저 지원)

※ 인접 선택자 = 이웃 선택자 : 번역하는 사람에 따라 다르게 표현. ㅡㅡ;;

어떤 요소와 동위에 위치한 형제 요소 중 바로 다음에 인접한 요소에만 스타일 줄 때 사용

즉,
A + B 라고 할 경우,
A 요소와 동위에 위치한 B 요소 중 바로 다음에 인접한 요소에만 스타일 줄 때 사용합니다.

[참고]
+ 앞뒤로 빈 공간이 있어도 되고, 없어도 상관 없음. 즉, 요소+요소처럼 붙여써도 되고, 요소 + 요소처럼 띄어써도 됨.

[예제1] h1 태그 바로 뒤의 p요소에만 스타일을 줌.

<style>
h1 + p {color: red;}
</style>

<p>홈페이지 무료 제작 강의</p>

<h1>홈짱닷컴 (homzzang.com)</h1>
<p>HTML 무료 강의</p>
<p>CSS 무료 강의</p>
<div>
<p>JAVA 무료 강의</p>
</div>

[예제2]

특정 태그 요소 (예:div)와 같은 레벨의 바로 뒤 요소 (예: 글 내용3에 사용된 p)에 스타일을 줄 때 사용.

즉, div 태그 이전에 있는 p태그나, div 안의 자손 p태그 등엔 적용이 되지 않습니다.

<style>

div+p {color:red;}

</style>

<p>글 내용1</p>

<div>
<p>글 내용2</p>
<blockquote><p>글 인용</p></blockquote>
</div>
<p>글 내용3</p>

응용

sticky menu (= 상단 스크롤 고정 메뉴) 만들 때 유용 샘플 보기

목록 글쓰기


분류	제목



입문	CSS - 정의와 장점 + CSS 기본 문법

입문	CSS - 발전사 (CSS1 → .01 → CSS3)

입문	CSS - 적용 방법 3가지 ★★★ - (인라인 스타일 / 내부 스타일 / 외부 스타일) 적용 순서 + 속성 강제 적용 !important

선택자	CSS - 선택자 (Selector) 종류

선택자	CSS - 아이디(id) , 클래스(class) 선택자 ★★★★★

선택자	CSS - 전체 선택자 (*)

선택자	CSS - 요소 선택자 (요소)

선택자	CSS - 병렬 선택자 (요소,요소) - 요소 여러 개 나열 ★

선택자	CSS - 자손 선택자 (요소 요소) ★

선택자	CSS - 자식 선택자 (요소>요소) : (IE7) ★ (해당 요소에만 스타일 줄 때 사용)

선택자	CSS - 인접 선택자 (요소+요소) : (IE7) ★★★

선택자	CSS - 속성 선택자 (요소[속성]) : (IE7)

선택자	CSS - 속성 값 선택자 (요소[속성=속성값 단어]) : (IE7)

선택자	CSS - 속성 값 선택자 (요소[속성~=속성값 단어]) : (IE7)

선택자	CSS - 속성 값 선택자 (요소[속성\|=속성값 단어]) : (IE7)

방문자 수

가입자 수

[선택자] CSS - 인접 선택자 (요소+요소) : (IE7) ★★★