[Front-End] 7) CSS Selector

css_inheritance.html

0.00MB

css_priority.html

0.00MB

학습 목표

1.  기본적인 Selector 문법을 이해한다.

 

 

---

핵심 개념

• CSS Selector
• id, class, tag selector
• nth-child

 

 

---

학습하기

CSS selector

HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다.

 

element에 style 지정을 위한 3가지 기본 선택자

• tag로 지정하기

• id로 지정하기

• class로 지정하기

CSS Selector의 다양한 활용

• id, class 요소 선택자와 함께 활용

• 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)

• 요소 선택 (공백) : 자손요소
• 아래 모든 span태그에 red색상이 적용됨

• 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
• 아래는 span tag 2만 red 색상이 적용됩니다.

• n번째 자식요소를 선택합니다. (nth-child)
• 첫번째 단락에 red 색상이 적용됩니다.

 

---

생각해보기

1.  pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.

nth-of-type : 같은 태그의 n번째를 찾아서 적용

nth-child : 태그 상관 없이 n번째를 찾아서 적용 (자식 태그)

 

* reference : 

1) https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01

CSS Selectors Cheatsheet

2) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity

3) https://www.edwith.org/boostcourse-web/lecture/16676/

[LECTURE] 3) CSS Selector : edwith