CSS 기초 - 선택자(selector), 속성(property), 우선순위(priority)

< CSS 기초 - 선택자(selector), 속성(property), 우선순위(priority) >

1. class 선택자(grouping) == .class_name

2. id 선택자 == #id_value

3. id, class 모두 같은 값으로 여러 곳에 동시 적용 가능.

(but, id 값은 동일 문서내에서 중복 사용하지 않도록 권장됨)

 ; id 선택자의 우선 순위가 가장 높게 설정되어 있는 이유

4. 우선순위(선후관계, tag vs class vs id)

 - style 속성(property) 중 보다 나중에(아랫쪽에) 기재된 내용이 우선 순위가 높음.

(즉, 마지막 속성값으로 최종 적용됨.)

 - tag 선택자보다 class 선택자가 우선 순위가 높음.

 - id 값에 적용된 style의 우선 순위가 class style 보다 높음.

(즉, id style은 먼저 적용이 되어도 class style이 override 하지 못함.)

 - 선택자 우선 순위 : id > class > tag > 선후관계

5. 선택자(CSS selector) 사용 팁(tip)

 - tag1, tag2 : tag1 요소와 tag2 요소를 각각 모두 선택

 - tag1 tag2 :  자손(하위 요소) 선택, tag1 내에 tag2 가 적용된 모든 요소를 선택(바로 밑이 아니어도 해당됨.)

 - tag1 > tag2 :  자식 선택, 부모가 tag1 인 tag2 요소만 선택

 - tag1.c : tag1 내의 c class 를 선택

 - .c : c class를 모두 선택

 - #i : id가 c 인 요소를 선택

 - tag1 > tag2:nth-child(2) : tag1 자식인 tag2 가 여러개인 경우, n번째 자식요소를 선택(nth-child)