[CSS] CSS 선택자 입력하는 방법

css를 작성하다 보면 선택자를 입력할 때 어떤 방법으로 입력해야 하는지 고민할 때가 있다.

특히 html에서는 부모 자식 관계로 태그들이 배치되어 있는데, css에서도 이러한 부모 자식 형태로 엘리먼트 요소를 지정하는 것이 좋다.

예를 들어 아래와 같은 html 코드가 있을 때

<div class="grid-container">
	<div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>

.grid-item{}
.grid-container div{}
.grid-container div.grid-item{}

세 번째로 css 코딩을 해 주는 것이 가장 좋다.