|선택자 이름|선택자 형태|설명|
|-|-|-|
|전체 선택자|*|모든 태그에 스타일을 적용한다.* {속성:값;}
|
|태그 선택자(유형 선택자)|태그|기술한 태그에 스타일을 적용한다.h1 {속성:값;}
|
|아이디선택자|#아이디|특정 아이디가 적용된 태그에 스타일을 적용한다.#id1 {속성:값;}
|
|클래스선택자|.클래스|특정 클래스가 적용된 태그에 스타일을 적용한다..class1 {속성:값;}
|
|태그 중 클래스|태그.클래스|선택된 태그 중 클래스를 가지고 있는 태그만 선택div.class1 {속성:값;}
|
|다중 태그(선택자 목록)|태그,태그|여러 다른 태그에 스타일을 적용하고 싶을 때 사용p,h1 {속성:값;}
|
|선택자 형태|설명|
|-|-|
|선택자[속성]|선택자에 의해서 선택된 태그중 해당 속성이 있는 태그만 선택 된다.a[href]
,img[title]
,*[class]
|
|선택자[속성=값]|선택된 태그 중 해당 속성이 있고 그 속성의 정의된 값과 동일한 값의 태그만 선택된다.|
|선택자[속성~=”값”]|선택된 태그 중 속성의 값과 동일하거나 스페이스로 구분된 값 중 동일한 값이 있을 때 선택된다. img[title~="bb]
일때 "aa bb cc"(O)
"bb"(O)
bbc(X)
"bb-cc"(X)
"abb bbb cc"(X)
|
|선택자[속성|=”값”]|선택된 태그 중 속성의 값과 동일 하거나 해당 값과 동일하게 시작하면서 다음에 -
이 오는 경우 선택된다.img[title\|="aa"]
일때 "aa"(O)
"aabb"(X)
"bbaa"(X)
"bb aa"(X)
"aa-bb"(O)
"bb-aa"(X)
|
|선택자[속성^=”값”]|선택된 태그 중 속성의 값으로 시작하면 된다.img[title^="aa"]
일때 "aa"(O)
"aabb"(O)
"bbaa"(X)
"bb aa"(O)
"aa-bb(X)
"bb-aa"(X)
|
|선택자[속성$=”값”]|선택된 태그 중 속성의 값의 마지막 부분과 같을 때 선택된다.img[title$="aa"]
일때 "aa"(O)
"aabb"(X)
"bbaa"(O)
"bb aa"(O)
"aa-bb"(X)
"bb-aa"(O)
함
|선택자[속성*=”값”]|선택된 태그 중 속성의 값에 포함 되어 있을 때 선택된다.img[title*="aa"]
일때 "aa"(O)
"aabb"(O)
"bbaa"(O)
"bb aa"(O)
"aa-bb"(O)
"bb-aa"(O)
"baac"(O)
|