CSS3의 선택자 정리
Front-end개발을 한다고 하면서 CSS3를 사용하는데.. 주로 사용하는 선택자들은 쉽게 사용하는데.. 많이 사용하지 않는 선택자에 대해서는 가끔씩 잊어버리거나 사용법을 잊어버리는 경우가 있습니다. 그래서 항상 참조할 수 있게 간단히 정리를 해 보려고 합니다. 선택자는 크게 기본 선택자 , 속성 선택자 , 상태 선택자 로 나눌수 있습니다. 기본 선택자 CSS3를 다루기 위해서는 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS레벨 * 모든 요소 선택 2 E 태그명이 E인 요소 선택 1 #myIDname id 속성값이 "myIDname"인 모든 요소 선택 1 .myClassname class 속성값이 "myClassname"인 모든 요소 선택 1 E, F 모든 E 요소와 모든 F 요소 선택 1 E F E 요소의 자손 요소 중 모든 F 요소 선택 1 E > F E 요소의 자식 요소 중 F 요소 선택 2 E + F 형제 요소 중 E 요소 바로 뒤에 있는 F 요소 한개 선택 2 E ~ F 형제 요소 중 E 요소 뒤에 있는 F 요소 모두 선택 3 속성 선택자 태그의 속성에 따른 선택자 입니다. 대괄호([]) 사이에 속성을 넣어서 선택합니다. 서식 설명 CSS레벨 E[attr] E 요소 중 'attr' 속성이 포함된 요소 선택 2 E[attr="val"] E 요소 중 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 선택 2 E[attr~="val"] E 요소 중 'attr' 속성의 값에 'val'이(공백으로 구분) 포함되는 요소 선택 2 E[attr^="val"] E 요소 중 'attr' 속성의 값이 'val