[CSS] Selector

안녕하세요! Seize~ 입니다:)
재즈 좋아하시나요? 저는 지금 chet baker 노래를 들으며 velog를 쓰고 있어요. 한 번 들어보시길!

오늘은 CSS 여러 선택자(selector) 중에서 목록(list) 아이템을 선택할 수 있는 표기방법을 알아볼게요

우선 선택자(selector)가 무엇인가요?

쉽게 설명하면 CSS 효과를 누구에게 줄건지
즉, 어떤 tag를 가진 element에게 줄건지 선택하는 것입니다.

(선택자는 나중에 다시 한 번 기본부터 다뤄보겠습니다.)

우리는 목록 태그인 ul, ol을 사용해 목록을 생성하고 그 안에 li 를 통해 실제 보여지는 목록들이 생성됩니다.

>마크다운

<ol>
  <li>하나</li>
  <li>둘</li>
  <li>셋</li>
  <li>넷</li>
  <li>다섯</li>
</ol>

>실행결과

1. 하나
2. 둘
3. 셋
4. 넷
5. 다섯

자! 그런데 이 중에서 홀수 li에만 css 효과를 주고 싶어요.
어떻게 하시겠어요?

일일이 홀수를 찾아서 하나씩 넣을 수도 있겠지만, 만약 리스트가 5개가 아니고 1억개라면 어떨까요?

매우 고통스럽고 절망적인 작업이 되지 않을까요?

>마크다운

li:nth-child(odd) {
  color: red;
}

>실행결과

1. 하나
2. 둘
3. 셋
4. 넷
5. 다섯

이제 우리는 목록 선택자를 알게 되었고, 1억번의 작업을 1번의 작업으로 끝낼 수 있게 되었습니다. 축하드립니다:)

추가적으로 아래 선택자도 한 번 실행해 보시고

selector:first-child
selector:last-child
selector:nth-child(even)

다른 선택자가 필요하시면 검색을 통해 더 알아보시면 좋을 것 같습니다.

추천 검색어 : css selector

[CSS] - selector 는 여기까지입니다:)

---

제 글이 조금이라도 도움이 되었으면 좋겠습니다.
읽어주셔서 감사합니다.

Seize the day!

---