[CSS] 선택자

선택자

단순 선택자

아이디 선택자 : Id로 스타일을 적용. 해당 Id 하나에 적용

Id : HTML 문서 내에서 동일한 아이디는 존재할 수 없음. 다른 요소와 구분되는 점을 만들어줌

#main { color:red; }

 

클래스 선택자 : 클래스 이름으로 스타일을 적용. 같은 클래스 이름이면 모두 적용

class : 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음. 여러 번 사용이 가능

.main { color:yellow; }

 

전체 선택자 : 모든 요소에 스타일 적용. 모든 요소에 적용하기 때문에 속도 저하 가능성 있음

* { color : blue; }

 

속성 선택자 : 특정 속성르 소유하는 모든 요소에 스타일을 적용

선택자[속성명 = "속성값"] { color : black; }

a[target = "_blank"] { color : black; }

 

pseudo 클래스 : 요소의 특별한 상태를 지정할 때 씀

ex) :link :visited :hover 등등,,,

 

 

복합 선택자

자식 선택자 : 선택자 A의 모든 자식 중 선택자 B와 일치하는 요소 선택

선택자 A > 선택자 B { color : red; }

article > p { color : red; }

 

후손 선택자 : 선택지 A의 모든 후손 중 선택자 B와 일치하는 요소 선택

선택자 A 선택자 B { color : blue; }

article p { color : blue; }