셀렉터를 사용하여 CSS 코드 줄이기

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

위와 같은 코드가 있다고 가정해보자.
나는 각각의 <li> 태그에 동일한 스타일을 주고 싶다면 어떻게 해야 할까?

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

#css
.navbarstyle { 
 ....
 }

위와 같은 코드를 작성할 경우
CSS에 nevbarstyle이라는 또 다른 클래스를 만들어줘야 한다.
과연 이상적인 코드일까?

아래와 같이 해보는 것은 어떨까?

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

#css
.navbar li {
  display : inline-block;
}

훨씬 보기 좋은 코드가 되었다.
위와 같이 자식 태그에 동일한 스타일을 여러 개 부여하고 싶을 때
셀렉터 라는 것을 활용하면 되는데 방법은
해당 태그에 > 또는 띄어쓰기를 넣어주어 .navbar li 또는 .navbar>li와 같은 코드를 쓸 수 있겠다.

(주의) 셀렉터 잘 쓰면 클래스 추가선언 없이도 내가 원하는 요소에 스타일을 쉽게 줄 수 있습니다. 하지만 이렇게 4~5개 이상 연달아 붙여쓰지 않길 권장합니다.