[CSS] 인접 결합자 / 형제 결합자

인접 결합자 / 형제 결합자

 

CSS 를 배우면서 우리는 결합자라는 것을 배웠습니다. 

결합자라는 것은 두 개 이상의  선택자를 결합하여 동일한 패턴을 만드는 것을 목적으로 합니다.

보통은 직계자손 선택자인 "선택자 > 선택자", 와 "ul li" 요소의 모든 자식을 의미하는 식으로 썼습니다.

오늘은 그와는 다른 "인접 결합자"와 "형제 결합자"에 대해서 알아 보겠습니다.

 

인접 결합자

:nth-child(1) : 자식 태그 중에 몇번째 태그인지 명시해주는 선택자 (1번이 있으면 1번째를의미한다)

 

인접 결합자는 "+" 를 붙여 사용합니다. 하는 역할은 바로 다음 인접한 태그를 선택해줍니다. 위에 사진에서 의미한 코드는 첫번째 li에 인접한 li 태그를 선택해준 것입니다. 코드 결과를 보면 box 1 다음에 box 2 에 빨간색이 적용된 것을 확인할 수 있습니다. 여기서 중요한 것은 바로 다음에 인접했다는 것입니다. 만약 :nth-child(3) 으로 코드를 바꿨으면 어디에도 적용되지 않습니다.

 

 

형제 결합자

 

형제 결합자는 "~" 를 붙여 사용합니다. 하는 역할은 다음에 있는 모든 형제 요소들을 선택해줍니다. 만약 위에 있는 사진처럼 코드를 작성하면 box 1의 다음 모든 형제 요소에 box 2,  box 3에 css 가 적용된 것을 확인할 수 있습니다.