[CSS] CSS Selector 결합

처음 CSS를 적용시킬 때 단일로 Selector를 지정해서 CSS를 적용하는 방식은 익숙할 것입니다.

하지만 CSS를 적용할 때 단일로만 지정해서 하는 것이 아닌 결합해서 지정하고 적용할 수 있습니다.

 

 

Group 결합

[양식]
selector, selector{
   color: blue;
}

-----------------------------

[예시]
h1, h2{
    color: blueviolet;
}

 

여러 태그에 대한 CSS 적용을 한번에 할 수 있습니다.
쉼표로 여러 태그나 속성들을 구분지어 한번에 적용할 수 있습니다.

 

 

Child 결합

[양식]
selector > selector{
   color: red;
}

----------------------------

[예시]
.box > p{
    color: firebrick;
}

부모 selector 안에 있는 직계 자식 selector 에 대해 CSS를 적용시킵니다.
> 기호를 기준으로 설정합니다.
왼쪽 selector가 부모, 오른쪽 selector가 자식 selector입니다.

 

 

후손 항목 결합

[양식]
selector selector{
   color: blue;
}

----------------------------

[예시]
.box li{
    color: blue;
}

후손 항목 결합은 자식 결합과 유사하지만 약간 다릅니다.
자식 결합은 바로 직계 자손에 대해 CSS 를 적용한다면, 후손 항목 결합은 선조와 후손의 개념으로 적용합니다.
예를 들어, div 태그 내에 ul 태그가 있고 또 그 밑에 li 태그가 존재한다면, div(선조) li(후손) 으로서 li 태그에 CSS를 적용합니다.
특별한 구분 기호는 없으며, 공백을 통해 왼쪽은 선조 selector, 오른쪽은 후손 selector로 판단합니다. 

 

 

체이닝 결합

[양식]
selectorselector{
   color: red;
}

--------------------------

li.done{
    color: seagreen;
}

체이닝 결합은 selector와 그 selector 내부의 명확하고 구체적인 특정 selector를 찾아 적용시키는 방법입니다.
구분 기호, 공백 조차없이 바로 붙여서 사용합니다.

 

 

결합의 결합

[양식]
selector > selectorselector{
   color: red;
}

---------------------------------

[예시]
ul > p.done{
    font-size: 0.5rem;
}

지금까지 나왔던 결합 방식들을 조합해서 사용할 수 있습니다.
위의 양식을 보면, > 기호로 구분된 자식 결합 방식과 체이닝 결합 방식이 조합된 형식을 띄고 있습니다.
부모 selector의 체이닝 결합된 자식 selector에 CSS가 적용된다고 볼 수 있습니다.
당연히 자식 결합 뿐만이 아니라 다른 결합 방식과 조합해서 사용할 수 있습니다.