셀렉터를 이용해 CSS 코드 양 줄이기

HTML 태그에 클래스 두개 이상 붙이기

<div class="container text-center"></div>

띄어쓰기를 한 다음 원하는 class를 이어 붙이면 된다.

1. 셀렉터 사용법 - 공백

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li {
  display : inline-block;
}

위처럼 공백을 이용해 li 태그인 모든 자손을 선택할 수 있다.
당연히 스페이스바 다음에 tag 셀렉터 말고 class 셀렉터, id 셀렉터 자유롭게 사용 가능하다.
.class.class.class 이런 식으로 무한히도 가능.

2. 셀렉터 사용법 - 꺽쇠 괄호

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar > li {
  display : inline-block;
}

꺽쇠 기호를 이용해 li 태그의 직계 자손을 선택할 수 있다.

3. 셀렉터 사용법 - 더욱 상세히 선택하고 싶다면

<ul class="navbar">
  <li> <span>안녕</span> </li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li>span {
  color : red;
}

셀렉터를 연달아 사용하면 된다. 위의 예제는 .navbar 안에 있는 모든 li 태그들 중에 직계자손으로 span 태그를 가지고 있는 녀석을 특정하고 있다.

셀렉터를 잘 쓰면 클래스를 추가선언 없이도 내가 원하는 것을 지정할 수 있다. 하지만 이것들을 연달아 많이 쓰는 것은 권장되지 않는다.

.container div div>p>span

딱 봐도 어떤 것을 지정하는지 바로 눈에 들어오지 않기 때문에 셀렉터를 남발하는 것보다 하나의 새로운 클래스를 지정하고 깔끔히 작성하도록 하자.

여담으로 셀렉터를 연달아 작성하다보면 나중에 파일이 커질 경우 쓸데없는 버그의 원인일 수 있기에 재사용성, 확장성을 염두한다면 절대로 하지 말자.