[CSS] 선택자

선택자는 html 파일을 만들고 태그에 스타일을 줄 때 사용한다.

 

선택자의 종류

 

• 전체 선택자 * { margin: auto; } - 모든 태그에 대하여 적용. 하지만 이 방법은 테스트 용도로만 사용하길 권장한다고 함.
• 태그 선택자 h1 { color: green; } - h1 태그에 대하여 적용.
• 클래스 선택자 .className { width: 50px; } - .클래스이름 으로 사용.
• 아이디 선택자 #idName { position: fixed; } - #아이디이름 으로 사용.

 

복합 선택자

 

• 하위선택자 section ul { text-shadow: none; } - 선택자 사이를 공백으로 나타내며 앞 요소의 자손인 뒷 요소를 선택.
• 자식선택자 section > ul { text-shadow: none; } - 선택자 사이를 >로 나타내며 앞 요소의 자식인 뒷 요소를 선택. 
• 인접형제선택자 h1 + ul { color: red; } - 선택자 사이를 +로 나타내며 앞 요소의 바로 뒷 요소를 선택.
• 일반형제선택자 h1 ~ ul {color: red; } - 선택자 사이를 ~로 나타내며 앞 요소의 모든 뒷 요소를 선택.

(자손은 모든 하위 요소를 의미, 자식은 바로 아래의 자식 요소에만 적용)