[CSS]3. 복합, 자식, 하위, 인접 형제, 일반 형제 선택자

목차

1. 복합 선택자
2. 자식 선택자
3. 하위 선택자
4. 인접 형제 선택자
5. 일반 형제 선택자

 

1. 복합 선택자

지난 시간에는 전체, 태그, 클래스, id 선택자에 대해서 알아보았다. 또한 전체, 태그, 클래스, id 선택자들의 우선순위에 대해서도 알아보았다. 만약 아직 해당 선택자들을 아직 모른다면 "[CSS]2. 기본 문법 - 선택자의 종류와 우선순위" 글을 읽고 오길 바란다. 복합 선택자는 말 그대로 2개 이상의 선택자를 모두 만족하는 선택 자이다. 아래 예시를 보면 쉽게 이해가 될 것이다. 아래 코드를 설명해 보자면, p태그이면서 ong 클래스를 가리키고 있다. 복합 선택자를 사용하면서 주의해야 하는 점은 선택자를 붙여주어야 한다는 것이다. 이것이 의미하는 것이 무엇이냐면, 아래 예제에서 p. ong이 아닌 p.ong으로 표기해야 된다는 것이다. 만약 p. ong으로 표기하면 그것은 복합 선택자가 아닌 하위 선택자가 되기 때문이다.

p.ong {
	color: blue;
}

2. 자식 선택자

기본적인 자식 선택자의 사용법을 설명해 보자면, >를 이용하여 자식을 나타내주면 된다. 아래 예제를 보면 p태그의 자식인 ong 클래스를 가지고 있는 요소에게 파란색 글씨를 주라는 것이다. 또한 자식만 선택할 수 있는 것은 아니다. 자식의 자식도 가능하다. 자식 선택자를 반복적으로 사용하여 하위 선택자와 비슷하게 사용할 수도 있지만 매우 비효율 적이다. 예를 들면 p >. ong > ol > li을 이용하여 p 태그의 자식의 자식의 자식을 선택할 수도 있다.

//ex 1
p > .ong {
	color: blue;
}

//ex 2
p > .ong > ol > li {
	color: blue;
}

3. 하위 선택자

자식 선택자의 기본적인 구조는 복합 선택자와 매우 유사하다. 첫번째 예제에서 p. ong이 아닌 p. ong으로 표기하면 복합 선택자가 아닌 하위 선택자가 된다고 하였다. 또한 하위 선택자는 자식 선택자의 확장판이라고 생각하면 된다. 자식 선택자의 경우에는 바로 아래의 자식만 선택되지만 하위 선택자의 경우에는 자식의 자식의 자식도 선택이 가능하다. 물론 자식 선택자에서도 자식의 자식의 자식을 일일이 나타내 준다면 가능하지만, 하위 선택자는 할아버지 요소와 손자 요소만 있더라고 선택이 가능하다는 것이 특징이다. 아래 예제를 본다면 이해가 쉽게 될 것이다. 자식 선택자를 사용했을 때는 p >. ong > ol > li를 사용했지만 하위 선택자를 사용한다면 같은 요소를 p li 하나로 간단하게 선택이 가능하다.

p li {
	color: blue;
}

4. 인접 형제 선택자

인접 형제 선택자의 기본적인 구조는 아래와 같다.

선택자1 + 선택자1과 같은 부모를 가지고 있는 선택자2 {
	속성: 속성값
}

만약 두 요소가 같은 부모를 지니고 있다면 두 요소는 형제 요소라고 부른다. 인접 형제 선택자같은 경우에는 말 그대로 인접한 형제를 선택한다. 바로 선택자 1 바로 다음에 나오는 선택자 2를 선택한다. 아래 예제를 보면 이해가 될 것이다. 아래 예제에서는 h1바로 다음에 나오는 h2요소에게 빨간색 색을 준다고 하고 있다. 만약 h1바로 다음이 아닌 h1태그와 h2 사이에 다른 요소가 끼어있다면, 원하는 결과가 나오지 않는다. 첫 번째 문단에서는 h1태그 바로 다음에 h2태그가 나왔지만 그다음 문단에서는 h1다음에 p태그가 끼어있었기 때문에 h2 요소가 빨간색이 되지 않았다. 요약해보자면 선택자 1 바로 뒤에 오는 선택자 2 에만 적용이 된다.

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.

 

5. 일반 형제 선택자

일반 형제 선택자의 기본적인 구조는 아래와 같다.

선택자1 ~ 선택자2 {
	속성: 속성값
}

일반 형제 선택자와 인접 형제 선택자의 차이점은 일반 형제 선택자는 첫번째 선택자와 두 번째 선택자 사이에 다른 태그가 있어도 선택이 되지만, 인접 형제 선택자는 그렇지 않다. 아래 예제를 보면 아까와 같이 h1태그와 h2 태그 사이에 p태그가 존재하지만 h2태그에 빨간색 속성이 적용되었다. 

See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.