- Style을 적용하고자 하는 HTML요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는것
- 복수개의 셀렉터를 연속하여 지정할 수 있고, 쉼표(,)로 구분
h1, p(color: red;}
1.전체 셀렉터(Universal selector)
* : HTML 문서 내 모든 요소 선택(HTML, head 요소도 다 포함)
2.태그 셀렉터(Type selector)
태그명: 지정된 태그명을 가지는 요소 선택
3. id셀렉터(id selector)
#id attribution값: id 어트리뷰트 값을 지정하여 일치하는 요소를 선택, id 어트리뷰트 값은 중복될 수 없는 유일한 값
4.클래스 셀렉터(Class Selector)
.class attribute 값: class 어트리뷰트 값을 지정하여 일치하는 요소를 선택. class 어트리뷰트 값은 중복 가능- HTML요소에 class 어트리뷰트 값은 공백으로 구분하여 여러개 지정 가능 -> 재사용의 측면에서 유용
-> class나 id가 selector일때 태그와 결합 가능. 예를 들어p.p-tag(color: red;)는 p태그 이면서 p-tag클래스이다. - 여러개의 셀렉터도 사용 가능
ex1).a div .b span{ }:a 클래스 밑에 div태그 밑, b클래스 밑, span 태그에만 적용
ex2)div.a span.b{ }: div태그 안에 a클래스 안에 span태그 안에 b클래스에만 적용
5.어트리뷰트 셀렉터(Attribute Selector)
(1)셀렉터[어트리뷰터]
:지정된 어트리뷰트를 갖는 모든 요소를 선택
ex)a[href] {color: red;}: a 태그 하이퍼링크 색깔 빨간색
(2)셀렉터[어트리뷰트="값]
: 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소 선택
ex)a[target="_blank"] {color: red;}: target 어트리뷰트 값이 "_blank"인 모든 요소 빨간색
(3)셀렉터[어트리뷰트~="값"]
: 지정된 어트리뷰트 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택
ex) h1[title~="value"] {color: red; }: h1요소중 title 어트리뷰트 값이 "value" 단어를 포함하는 요소는 빨간색
(4)셀렉터[어트리뷰트|="값"]
: 지정된 어트리뷰트 값과 일치하거나 값 뒤 연이은 하이픈("값-")으로 시작하는 요소 선택
ex)div[class|="value"]{color: red; }: div 요소 중class 값이 "value"와 일치하거나 "value-"로 시작하는 요소는 빨간색
(5)셀렉터[어트리뷰트^="값"]
: 지정된 어트리뷰트 값으로 시작하는 요소 선택
ex) div[class^="value"] {color: red; }: div 요소 중 class 값이 "value"로 시작하는 요소는 빨간색
(6)셀렉터[어트리뷰트$="값"]
: 지정된 어트리뷰트 값으로 끝나는 요소 선택
ex)div[class$="value"] {color: red; }: div요소 중 class값이 "vlaue로 끝나는 요소는 빨간색
(7)셀렉터[어트리뷰트*="값"]
: 지정된 어트리뷰트 값을 포함하는 요소 선택
ex)div[class*="value"] {color: red; }: div요소 중 class 값이 "vlaue"를 포함하는 요소
6. 복합 셀렉터(Combinator)
(1)후속 셀렉터(Descendant Combinator)
- 자신의 1level 상위에 속하는 요소: 부모요소
- 자신의 1level 하위에 속하는 요소: 자손요소(자식요소)
- 자신의 nlevel 하위에 속하는 요소: 후손요소(하위요소)
셀렉터A 셀렉터B: 후손셀렉터는 셀렉터 A의 모든 후손(하위)요소 중 셀렉터B와 일치하는 요소 선택
(2)자식 셀렉터(Child Combinator)
셀렉터 A>셀렉터B: 자손 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터 B와 일치하는 요소를 선택
(3)형제(동위)셀렉터 (Sibling Combinator)
: 형제(동위) 셀렉터는 형제관계(동위관계)에서 뒤에 위치하는 요소를 선택할 때 사용
1)인접 형제 셀렉터(Adjacent Sibling Combinaor)
셀렉터A+셀렉터B { }: 셀렉터 A 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택(단, A와 B사이에 다른 요소가 존재하면 선택되지 않음)
2)일반 형제 셀렉터(General Sibling Combinator)
셀렉터A~셀렉터B { }: 셀렉터 A의 형제 요소 중 셀렉터 A뒤에 위치하는 셀렉터B 요소를 모두 선택
7.가상 클래스 셀렉터(Pseudo-Class Selector)
: 요소의 특정 상태에 따라 스타일을 정의할 때 사용
selector:pseudo-class { property: value; }
- 예를 들면 마우스가 올라와 있을때, 링크를 방문했을때와 아직 방문하지 않았을때 등이다.
- 이러한 특정 상태에서는 원래 클래스가 존재하지 않지만, 가상 클래스를 임의로 지정하여 선택하는 방법이다.
- 가상 클래스는 마침표(.) 콜론(;)을 사용
- CSS 표준에 의해 미리 정의된 이름이 있어서 임의의 이름 사용 불가
a:hover { color: red; }
-> a 요소가 hover상태일 때
input:focus { background: gray; }
-> input 요소가 focus 상태일때
(1)링크 셀렉터(Link Pseudo-classes), 동적 셀렉터(User action pseudo-classes)
a:link {color: green; }: a 요소가 방문하지 않은 링크일때 초록색
a:visited {color: red; }:a요소가 방문한 링크일때 빨간색
a:hover {font-weight: bold; }: a요소에 마우스가 올라와 있을때 볼드처리
a:active {color: blue; }: a요소가 클릭된 상태일때 파랑색
input[type=text]:foxus,
input[type=password]:focus {
background: yellow;
}-> text input요소와 password input요소에 포커스가 들어와있을 때 배경 노란색
(2)UI 요소 상태 셀렉터(UI Element states psedo-classes)
input:enabled + span {
color: blue;
}->input 요소가 사용가능한 상태일때, input요소 바로 뒤에 위치하는 인접 형제 span 요소 선택시 파란색
input:disabled +span {
color: gray;
text-decoration: line-through;
}->input요소가 사용 불가능한 상태일때, input요소 바로 뒤에 위치하는 인접 형제 span요소를 선택시 색은 회색, text에 줄 그어짐
input:checked + span {
color: red;
}->input요소가 체크 상태일때, input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택시 빨간색
(3)구조 가상 클래스 셀렉터(Structual pseudo-classes)
셀렉터: first-child: 셀렉터에 해당하는 모든 요소 중 첫번째 자식 요소를 선택
셀렉터:last-child셀렉터에 해당하는 모든 요소 중 마지막 자식 요소 선택
셀렉터:nth-child(n): 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택
셀렉터:nth-last-child(n)셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소 선택
-> n은 0부터 시작하는 정수
2n+1, 2n-1: 1.3.5.7... /3n-2, 3n+1: 1,4,7,10....
셀렉터:first-of-type: 셀렉터에 해당하는 요소의 부모 요소의 자식요소 중 첫번째 등장하는 요소를 선택
-> 셀렉터:first-child와 다른점은 첫번째에 꼭 셀렉터 요소가 오지 않아도 선택이 가능하다는점
예를들면
<div> <h1>heading</h1> <p>text1</p> <p>text2</p> <p>text3</p> </div>라고 한다면
p:first-child는 div 밑에 p요소가 첫번째에 위치해야 선택할 수 있지만 첫번째 요소가 h1이기 때문에 선택이 되지 않는다. 반면에p:first-of-type은 실제 p요소 기준으로 카운트를 하기 때문에 text1이 선택된다.
(4)부정 셀렉터(Negation pseudo-class)
요소:not(셀렉터) { }: 셀렉터에 해당하지 않는 모든 요소를 선택
(5)정합성 체크 셀렉터(Validity pseudo-class)
요소:valid(셀렉터): 정합성 검증이 성공한 input요소 또는 form요소를 선택
요소:invalid(셀렉터):정합성 검증이 실패한 input요소 또는 form요소를 선택
8.가상 요소 셀렉터(Pseudo-element seclector)
- 요소의 특정 부분에 스타일을 적용하기 위하여 사용
- 특정부분: 요소 콘텐츠의 첫글자 또는 첫줄, 요소 콘텐츠의 앞 또는 뒤
- 가상 요소에는 두개의 콜론(::)을 사용
- CSS 표준에는 미리 정의된 이름이 있어 임의의 이름은 사용 불가능
selector::pseudo-element {
property: value;
}요소::first-letter: 콘텐츠의 첫글자 선택
요소::first-line: 콘텐츠의 첫줄을 선택, 블록 요소에만 적용 가능
요소::after: 콘텐츠의 뒤에 위치하는 공간 선택, 일반적으로 content 프로퍼티와 함께 사용
요소::before: 콘텐츠의 앞에 위치하는 공간 선택, 일반적으로 content 프로퍼티와 함께 사용
요소::selection: 드래그한 콘텐츠를 선택, IOS, Safafi 등 일부 브라우저에서 동작X
출처
