[CSS] 선택자 활용하기

.parent1 .parent__child1 { /* some style */ }

- 'parent1에 속해 있는 parent__child1(결과적으로는 parent__child1)에 스타일을 적용할 거야!'라는 의미입니다.

 

.parent1, .parent__child1 { /* some style */ } // , 다음 붙여도 되고, 띄어쓰기를 해도 상관 없습니다.

- parent1과 parent__child1 각각에게 스타일을 적용할 거야!

- parent / child와 상관없이 그냥 동일한 스타일을 적용하고 싶을 때 쓰면됌. 동일한 스타일이 많이 적용된다면 차라리 따로 class naming을 하는 게 낫다. 

 

.parent__child1 h1 { /* some style */ }

- parent__child1에 있는 h1에게만 스타일을 적용할 거야!

 

.parent__child1 h1:hover { /* some style */ }

- parent__child1에 있는 h1이 hover 됐을 경우 이런 스타일을 적용할 거야!

---

.parent1.parent__child1 { /* some style */ }

- html의 classs 이름이 <div class="parent1 parent__child1"></div>이런식으로 되어있는 경우에 사용합니다.

- .parent1만 쓸 수도 있습니다.

- 이러한 경우는 parent1의 style이 여러 element에 적용된다면 각각 style을 적용하는 것 보다 한번만 작성하며 되므로, 코드도 간편해 져서 메모리도 덜 차지하고 작업효율성을 높여줄 수 있습니다. 그래서 class naming을 잘 하는 것은 매우 중요합니다.