css - 인접선택자, 일반선택자

css를 구성하면서 자주쓰게 됐던 인접선택자와 일반선택자에 대해 정리해볼께요.

 

형제 선택자에는 두가지 종류가 있습니다.

 

첫번쨰, 인접 형제 선택자 (adjacent sibling selector)

두번쨰, 일반 형제 선택자 (general sibling selector)

 

두 선택자의 공통점은 '같은 부모를 가진다'입니다.

 

차이점을 정리해볼께요.

 

⭐️ 인접 형제 선택자

작성법 ( '.class'는 임의입니다. )

.class1 + .class2 {속성: 속성값;}

같은 부모를 가진 .class1 바로뒤에 오는 2에게 스타일을 적용한다.

ex)

p1 + p2 {color:red;}

이 경우에 p1바로 뒤에있는 p2의 color가 red 로 나옵니다.

 

⭐️ 일반 형제 선택자

작성법 ( '.class'는 임의입니다. )

.class1 ~ .class2 {속성: 속성값;}

같은 부모를 가진 .class1 뒤에 오는 2에게 스타일을 적용한다. *바로 뒤일 필요가 없다.

ex)

<p>테스트용 글입니다.</p>
<h2>테스트용 텍스트</h2>
<span>마지막 텍스트입니다.</span>

p ~ span {color:red;}

일 경우 출력 결과

테스트용 글입니다. 테스트용 텍스트 마지막 텍스트입니다.