[CSS] css: 선택자(Selector)

CSS 선택자(Selector)란?

말 그대로 선택을 해주는 요소입니다. 선택자를 통해서 요소를 선택하고 스타일을 적용할 수 있습니다.

 

Rule Set

HTML안의 특정 요소들을 어떻게 렌더링 할 것인지 브라우저에게 알려주는 CSS 문장입니다.

스타일 규칙이라고 불리며 이런 문장들이 모여 스타일 시트(Style Sheet)를 이룹니다.

Rule Set

선택자(Selector) 종류

1. 전체 선택자 (*): HTML 안의 모든 요소를 선택

2. tag 선택자: 특정 HTML 태그를 선택

3. class 선택자: 요소에 지정된 class 값을 이용해서 요소를 선택 (여러 요소에 사용 가능)

4. id 선택자: 요소에 지정된 id값을 이용해서 요소를 선택 (유일한 값을 가짐)

5. 하위 선택자(E F): E요소의 자손인 F를 선택

6. 자식 선택자(E > F): E요소의 자식인 F를 선택

속성 선택자(Attribute Selector) : 태그 안의 특정 속성을 이용하여 스타일을 지정하는 선택자

패턴	의미
E[attr]	'attr' 속성이 포함된 요소 E 선택
E[attr='val']	'attr' 속성의 값이 val인 요소 E 선택
E[attr~='val']	'attr' 속성의 값에 val이 포함되는 요소 E 선택
E[attr^='val']	'attr' 속성의 값이 val로 시작하는 요소 E 선택
E[attr$='val']	'attr' 속성의 값이 val로 끝나는 요소 E 선택
E[attr*='val']	'attr' 속성의 값에 val이 포함되는 요소 E 선택
E[attr|='val']	'attr' 속성의 값이 정확하게 val이거나 val-로 시작하는 요소 E 선택

 

더 많은 선택자가 있지만 평소에 많이 사용하고 헷갈리는 선택자들만 정리했습니다!! 

 

참고: www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해