[css] 첫 번째 태그 선택하기

안녕하세요. 플입니다.

오늘은 선택자를 이용해 첫 번째 태그를 선택해보겠습니다.

 

---

 1.  html보기 

<ul class="w_btn">
   <li><button>All</button></li>
   <li><button>Responsive</button></li>
   <li><button>PC</button></li>
   <li><button>Etc</button></li>
</ul>

먼저 html 코드를 한 번 살펴보겠습니다.

 

<ul>과 <li>를 이용해 만든 리스트입니다.

여기서 첫 번째 <li> 태그만 선택해보겠습니다.

 

 

---

 2.  first-child

li:first-child{ margin-left:0; }

li:first-child를 이용해 첫 번째 <li>를 선택할 수 있습니다.

 

첫 번째 <li>에 margin-left:0을 입력해 왼쪽 마진을 없애주었습니다.

이미지를 보시면 첫 번째 <li>만 왼쪽에 여백이 없는 것을 알 수 있습니다.

 

이렇게 <li> 전체가 아닌 한 개만 따로 값을 주고 싶을 때 이런 선택자를 사용합니다.

 

---

그럼 이만.

총총.