Selector
Style을 적용하고자 하는 HTML요소를 특정. 선택된 요소에 스타일을 정의.
h1 { color: red; }
p {color : blue; }
복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표 로 구분.
h1, p {color : red; }
1. 전체 셀렉터 Universal Selector
* { color : red; }
HTML 문서 내의 모든 요소를 선택한다. html요소를 포함한 모든 요소가 선택된다 (head 요소도 포함됨)
2. 태그 셀렉터 Type Selector
p { color : blue; }
지정된 태그명을 가지는 요소를 선택.
3. ID 셀렉터 ID Selector
<style>
#p1 { color: blue; }
</style>
.
.
.
<p id="p1"> paragraph 1 </p>
#id 어트리뷰트 값을 지정하여 일치하는 요소를 선택. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.
4. 클래스 셀렉터 Class Selector
.class 어트뷰트 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다. 재사용의 측면에서 유용함.
5. 어트리뷰트 셀렉터 Attribute Selector
a[href] { color : red; }
a 요소중에 herf 어트리뷰트를 갖는 모든 요소를 선택함.
- 셀렉터[어트리뷰트], 지정된 어트리뷰트를 갖는 모든 요소를 선택.
- 셀렉터[어트리뷰트="값"] , 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택.
- 셀렉터[어트리뷰트~="값"], 지정된 어트리뷰트의 값이 지정된 값을(공백으로 분리된) 단어로 포함하는 요소를 선택.
- 셀렉터[어트리뷰트|="값"], 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈("값~")으로 시작하는 요소를 선택.
- 셀렉터[어트리뷰트^="값"], 지정된 어트리뷰트 값으로 시작하는 요소를 선택.
- 셀렉터[어트리뷰트$="값"], 지정된 어트리뷰트 값으로 끝나는 요소를 선택.
- 셀렉터[어트리뷰트*="값"], 지정된 어트리뷰트 값을 포함하는 요소를 선택.
6. 복합 셀렉터 Combinator
6.1 후손 셀렉터 Descendant Combinator
- 부모 요소 : 자신의 1 level 상위에 속하는 요소
- 자손 요소(자식 요소) : 1 level 하위에 속하는 요소
- 후손 요소(하위 요소) : n level 하위에 속하는 요소
후손 셀렉터는 셀렉터A의 모든 후손(하위) 요소 중 셀렉터 B와 일치하는 요소를 선택한다.
div p { color: orange; }
div 요소의 후손요소 중 p 요소
6.2 자식 셀렉터 Child Combinator : 셀렉터 A의 모든 자식 요소 중 셀렉터 B 와 일치하는 요소를 선택.
div > p { color: orange; }
div 요소의 자식요소 중 p 요소
6.3 형제(동위)셀렉터 Sibling Combinator
형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용함.
- 일반 형제 결합자 : 두개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할때 선택. 두 요소가 서로 붙어있을 필요는 없다.
img ~ p {
color : red;
}
- 인접 형제 결합자 : 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택.
img + p {
font-weight : bold;
}
7. 가상 클래스 셀렉터 Pseudo-Class Selector
요소의 특정 상태에 따라 스타일을 정의할 때 사용.
- 마우스가 올라와 있을 때
- 링크를 방문했을 때, 아직 방문하지 않았을 때
- 포커스가 들어와 있을 때
원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법.
콜론(;)을 사용.
selector:pesudo-class{
property: value;
}
/* a 요소가 hover(마우스가 올라와 있을 때) 상태일 때 */
a:hover { color : red; }
/* input 요소가 focus 상태일때 */
input:focus { background-color : blue; }
7.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터 (User action pseudo-classes)
- link : 셀렉터가 방문하지 않은 링크 일 때
- visited : 셀렉터가 방문한 링크일 때
- hover : 셀렉터에 마우스가 올라와 있을 때
- active : 셀렉터가 클릭된 상태일 때
- focus : 셀렉터에 포커스가 들어와 있을 때
7.2 UI 요소 상태 셀렉터 UI element states pseudo-classes
- checked : 셀렉터가 체크 상태일 때
- enabled : 셀렉터가 사용 가능한 상태일 때
- disabled : 셀렉터가 사용 불가능한 상태일 때
7.3 구조 가상 클래스 셀렉터 Structural pseudo-classes
- first-child : 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택.
- last-child : 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택.
- nth-child(n) : 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택.(n은 0부터 시작)
- nth-last-child(n) : 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택.
- first-of-type : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택.
- last-of-type: 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택.
- nth-of-type:셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 n번째 등장하는 요소를 선택.
- nth-last-of-type:셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째 등장하는 요소를 선택.
7.4 부종 셀렉터 Negation pseudo-class
not : 셀렉터에 해당하지 않는 모든 요소를 선택함.
7.5 정합성 체크 셀렉터 Validity pseudo-class
- valid selector : 정합성 검증이 성공한 input 요소 또는 form 요소를 선택.
- invalid selector : 정합성 검증이 실패한 input 요소 또는 form 요소를 선택.
8. 가상 요소 셀렉터 Pseudo-Element-Selector
요소의 특정 부분에 스타일을 적용하기 위하여 사용.
- 요소 콘텐츠의 첫글자 또는 첫줄
- 요소 콘텐츠의 앞 또는 뒤
두개의 콜론을 사용 (::)
- ::frist-letter : 콘텐츠의 첫글자를 선택.
- ::first-line : 콘텐츠의 첫줄을 선택. 블록 요소에만 적용할 수 있다.
- ::after : 콘텐츠의 뒤에 위치하는 공간을 선택.
- ::before : 콘텐츠의 앞에 위치하는 공간을 선택.
- ::selection : 드래그한 콘텐츠를 선택.