[CSS] 결합선택자 - 상속/ 형제

상속

1. 자손 결합자 ( 공백) 

• 하위에 있는 태그, 자식 태그들로 범위를 좁혀서 선택한다.

2. 자식 결합자 (>)

• 바로 아래 자식만 좁혀서 선택한다.

 

형제

1. 일반 형제 결합자 (~)

• 내 뒤에 있는 형제를 선택한다.  (여기서 형제 = 같은 레벨 을 말한다.)

2. 인접 형제 결합자(+)

• 바로 뒤에 있는 형제만 선택한다.

형제를 선택할때는 '순서'가 중요하다.
[선택자1] ~ [선택자2]
선택자 1의 '뒤에'있는 선택자2를 선택한다.

 

 

다음 예시를 천천히 보면서 이해해보자.

 

See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen.

 

index.html

<div>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <section>
            <p>Hello</p>
            <p>Hello</p>
            <p>Hello</p>
        </section>
    </div>

    <p>Hello</p>
    <p>Hello</p>

    <div>
        <p>Hello</p>
        <p>Hello</p>
    </div>

    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>

main.css

/* 자손 */
div p {
  background-color: red;
}

div > p {
  background-color: orange;
}

/* 형제 */
div ~ p {
  background-color: purple;
}

div + p {
  background-color: blue;
}

 

1. 빨간네모영역 : div p

2. 노랑네모영역: div >p

3. 보라네모영역: div ~ p

4. 파랑네모영역: div + p