# CSS Selector

navbar 디자인 하면서 배우는 css selector



HTML5 에서 새롭게 추가된 태그들

* Header      &#x20;
* Footer
* Nav&#x20;
* Section
* Article&#x20;
* Figure
* Aside

{% embed url="https://choseongho93.tistory.com/56" %}

&#x20;상단 nav 바&#x20;

```html
<nav>
  <ul class="navbar">
    <li>영화</li>
    <li>맛집</li>
    <li>IT</li>
    <li>개발</li>
  </ul>
</nav>
```

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



css selector 문법&#x20;

1. .navbar>li { } : \~안에 있는 직계 자식
2. .navbar li { } :  \~안에 있는 모든 자식

```html
<nav>
  <ul class="navbar">
    <li>
      <a href="#">영화</a>
    </li>
    <li><a href="#">맛집</a></li>
    <li><a href="#">IT</a></li>
    <li><a href="#">개발</a></li>
  </ul>
</nav>
```

```css
.navbar li{
    display: inline-block;
    width: 60px;
    background: #eee;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.navbar a {
    font-size: 16px;
    text-decoration: none;
}
```



셀렉터 잘 쓰면 클래스 추가선언 없이도 내가 원하는 요소에 스타일을 쉽게 줄 수 있습니다.&#x20;

하지만 이렇게 4\~5개 이상 연달아 붙여쓰지 않길 권장합니다.

```css
.container div div>p>span
```

셀렉터를 남발하는 것 보다는 하나의 새로운 클래스를 만드는게 훨씬 더 나을 수 있습니다.

&#x20;차라리 그냥 span 윗부분에 클래스를 하나 만들어서 사용

```
.headline>span
```

CSS 셀렉터부분만 읽어도 내가 어떤 요소를 스타일넣고 있는지 바로 이해가 가능합니다.&#x20;

읽기만 해도 어떤 스타일을 주는지 알 수 있는 셀렉터가 좋은 셀렉터 사용법입니다.&#x20;

&#x20;셀렉터 4\~5개 연달아 작성하면 나중에 파일이 커지면 쓸데없는 버그의 원인일 수 있기 때문에 재사용성, 확장성을 염두에 둔다면 저렇게 쓰면 안됩니다
