선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.
패턴 | 뜻 |
---|---|
#id | id로 지정된 요소 선택 |
.class | class로 지정된 요소 선택 |
E | E 요소를 선택 |
E:link | 방문하지 않은 E를 선택 |
E:visited | 방문한 E를 선택 |
E:hover | 마우스가 올라가 있는 동안 E를 선택 |
E:active | 마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택 |
E:focus | focus가 머물러 있는 동안 E를 선택 |
E:first-line | E 요소의 첫 번째 라인 선택 |
E:first-letter | E 요소의 첫 번째 문자 선택 |
* | 모든 요소 선택 |
E:first-child | 첫 번째 자식 요소가 E라면 선택 |
E:lang(fr) | HTML lang 속성의 값이 ’fr’로 지정된 E를 선택 |
E::before | E 요소 전에 생성된 요소 선택 |
E::after | E 요소 후에 생성된 요소 선택 |
E>F | E 요소의 자식인 F 요소 선택 |
E+F | E 요소를 뒤의 F 요소 선택 |
E[foo] | ‘foo’ 속성이 포함된 E를 선택 |
E[foo="bar"] | ‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택 |
E[foo~="bar"] | ‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택 |
E[foo|="en"] | ‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는 E를 선택 |
E[foo^="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택 |
E[foo$="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택 |
E[foo*="bar"] | ‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택 |
E:root | 문서의 최상위 루트 요소 선택 |
E:nth-child(n) | 그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택 |
E:nth-last-child(n) | n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 |
E:nth-of-type(n) | E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택 |
E:nth-last-of-type(n) | E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택 |
E:last-child | E 요소 중 마지막 자식이라면 E 선택 |
E:first-of-type | E 요소 중 첫번째 E 선택 |
E:last-of-type | E 요소 중 마지막 E 선택 |
E:only-child | E 요소가 유일한 자식이면 선택 |
E:only-of-type | E 요소가 같은 타입이면 선택 |
E:empty | 텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택 |
E:target | E의 URI의 대상이 되면 선택 |
E:enabled | 활성화된 폼 컨트롤 E요소 선택 |
E:disabled | 비활성화된 폼 컨트롤 E요소 선택 |
E:checked | 선택된 폼 컨트롤(라디오버튼,체크박스)을 선택 |
E:not(s) | s가 아닌 E 요소 선택 |
E~F | E 요소가 앞에 존재하면 F를 선택 |
.mMenu a:first-child {background-color:blue; } .mMenu a:nth-child(2){background-color:blue; } .mMenu a:nth-child(3){background-color:blue; } .mMenu a:nth-child(4){background-color:blue; } .mMenu a:nth-child(5){background-color:blue; } .mMenu a:nth-child(6){background-color:blue; } .mMenu a:nth-child(7){background-color:blue; } .mMenu a:nth-child(8){background-color:blue; } .mMenu a:last-child {background-color:blue; }
패턴 | 의미 |
---|---|
E F | E 요소의 자손인 F 요소를 선택합니다. |
E>F | E 요소의 자식인 F 요소만 선택합니다. |
태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다
패턴 | 의미 |
---|---|
E+F | E 요소를 뒤따르는 F 요소를 선택합니다.(E와 F 사이에 다른 요소가 존재하면 선택하지 않습니다.) |
E~F | E 요소가 앞에 존재하면 F를 선택합니다. (E가 F보다 먼저 등장하지 않으면 선택하지 않습니다.) |
같은 부모 요소를 가지는 요소들을 형제 관계라고 부릅니다. 이 때 먼저 나오는 요소를 ‘형 요소’, 나중에 나오는 요소를 ‘동생 요소’라고 합니다. 먼저 나온다는 것은 html문서에 먼저 쓰여지는 것을 말합니다.
인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 때에만 스타일을 적용합니다. 하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다
위에서 살펴본 선택자들은 태그나 클래스 이름, ID이름만 알면 그대로 스타일을 적용할 수 있습니다. 하지만 이제 살펴볼 속성 선택자는 클래스 속성이나 ID속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다.
E[foo] | ‘foo’ 속성이 포함된 E를 선택 |
E[foo="bar"] | ‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택 |
E[foo~="bar"] | ‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택 |
E[foo|="en"] | ‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는 E를 선택 |
E[foo^="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택 |
E[foo$="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택 |
E[foo*="bar"] | ‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택 |
/* E[attr]형식 */ a[href] { background: yellowgreen; color: black; } /* E[attr="val"]형식 */ input[type="text"] { width: 150px; border: 1px solid #000; } /* E[attr$="val"]형식 */ a[href$=".xls"] { background: darkgreen; } <!-- HTML --> <a href="one.html">E[attr]형식</a> <input type="text" name="name"> <a href="one.xls">E[attr$="val"]형식</a>