1. 기본적인 셀렉터 종류
전체 셀렉터 (Universal Selector)
* { color: red; }
태그 셀렉터 (Type Selector)
p { color: red; }
ID 셀렉터 (ID Selector)
#p1 { color: red; }
클래스 셀렉터 (Class Selector)
.container { color: red; }
2. 어트리뷰트 셀렉터 (Attribute Selector)
패턴 | 설명 | 예시 |
---|---|---|
셀렉터[어트리뷰트] |
지정된 값을 갖는 모든 요소를 선택한다. | a[href] { color: red; } |
셀렉터[어트리뷰트="값"] |
지정된 값이 일치하는 모든 요소를 선택한다. | a[target="_blank"] { color: red; } |
셀렉터[어트리뷰트~="값"] |
지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다. | h1[title~="first"] { color: red; } |
셀렉터[어트리뷰트 | ="값"] |
지정된 값과 일치하거나 지정 값 뒤 연이은 하이픈("값-")으로 시작하는 요소를 선택한다. | p[lang|="en"] { color: red; } |
셀렉터[어트리뷰트^="값"] |
지정된 값으로 시작하는 요소를 선택한다. | a[href^="https://"] { color: red; } |
셀렉터[어트리뷰트$="값"] |
지정된 값으로 끝나는 요소를 선택한다. | a[href$=".html"] { color: red; } |
셀렉터[어트리뷰트*="값"] |
지정된 값을 포함하는 요소를 선택한다. | div[class*="test"] { color: red; } |
3. 복합 셀렉터 (Combinator)
1 level 하위에 속하는 요소를 자손 요소(자식 요소)라하며 자신보다 n level 하위에 속하는 요소는 후손 요소(하위 요소)라 한다.
종류 | 설명 | 예시 |
---|---|---|
후손 셀렉터 (Descendant Combinator) | 셀렉터A의 모든 후손(하위) 요소 중 셀렉터B와 일치하 는 요소를 선택한다. | div p { color: red; } |
자식 셀렉터 (Child Combinator) | 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택한다. | div > p { color: red; } |
인접 형제 셀렉터 (Adjacent Sibling Combinator) | 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다. | p + ul { color: red; } |
일반 형제 셀렉터 (General Sibling Combinator) | 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다. | p ~ ul { color: red; } |
※ 형제(동위) 셀렉터는 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용한다.
4. 가상 클래스 셀렉터 (Pseudo-Class Selector)
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 들어 다음과 같다.
- 마우스가 올라와 있을때
- 링크를 방문했을 때와 아직 방문하지 않았을 때
- 포커스가 들어와 있을 때
가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
4.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)
종류 | 설명 |
---|---|
링크:link | 셀렉터가 방문하지 않은 링크일 때 |
링크:visited | 셀렉터가 방문한 링크일 때 |
링크:hover | 셀렉터에 마우스가 올라와 있을 때 |
링크:active | 셀렉터가 클릭된 상태일 때 |
링크:focus | 셀렉터에 포커스가 들어와 있을 때 |
4.2 UI 요소 상태 셀렉터(UI element states pseudo-classes)
종류 | 설명 |
---|---|
UI 요소:checked | 셀렉터가 체크 상태일 때 |
UI 요소:enabled | 셀렉터가 사용 가능한 상태일 때 |
UI 요소:disabled | 셀렉터가 사용 불가능한 상태일 때 |
4.3 구조 가상 클래스 셀렉터(Structural pseudo-classes)
-child
형식
셀렉터의 부모 요소의 자식 요소들 중 하나의 선택을 의미하는 가상 클래스 셀렉터이다.
※ 단순히 자식 요소 중 하나를 선택하는 방식이므로 셀렉터의 요소와 매치되는 요소가 없다면 해당 내용이 적용되지 않는다.
종류 | 설명 |
---|---|
:first-child |
부모 요소의 자식 요소들 중 첫 번째 자식인 요소를 선택한다. |
:last-child |
부모 요소의 자식 요소들 중 마지막 자식인 요소를 선택한다. |
:nth-child(n) |
부모 요소의 자식 요소들 중 앞에서 n번째 자식인 요소를 선택한다. |
:nth-last-child(n) |
부모 요소의 자식 요소들 중 뒤에서 n번째 자식인 요소를 선택한다. |
-of-type
형식
셀렉터의 부모 요소의 자식 요소 중 해당 타입의 요소들 중 하나의 선택을 의미하는 가상 클래스 셀렉터이다.
-child
형식과 마찬가지로 해당 타입의 자식 요소와 매치되는 요소가 없다면 해당 내용이 적용되지 않는다.
종류 | 설명 |
---|---|
:first-of-type |
해당 타입의 첫 번째 요소를 나타낸다. |
:last-of-type |
해당 타입의 마지막 요소를 나타낸다. |
:nth-of-type(n) |
해당 타입의 앞에서 n 번째 요소를 나타낸다. |
:nth-last-of-type(n) |
해당 타입의 뒤에서 n 번째 요소를 나타낸다. |
4.4 부정 셀렉터(Negation pseudo-class)
:not( 셀렉터 )
: 괄호안에 셀렉터의 해당하지 않는 모든 요소를 선택한다.
input:not([type=password]) { background: yellow; }
4.5 정합성 체크 셀렉터(validity pseudo-class)
종류 | 설명 |
---|---|
:valid(셀렉터) |
정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다. |
:invalid(셀렉터) |
정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다. |
5. 가상 요소 셀렉터 (Pseudo-Element Selector)
가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용하며 가상 요소에는 두개의 콜론(::)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
종류 | 설명 |
---|---|
::first-letter |
콘텐츠의 첫글자를 선택한다. |
::first-line |
콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다. |
::after |
콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다. |
::before |
콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다. |
::selection |
드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다. |
참고
'HTML CSS' 카테고리의 다른 글
CSS 이론 채워 넣기 - 3. background 관련 속성 (0) | 2023.09.14 |
---|---|
CSS 이론 채워 넣기 - 2. 다양한 CSS 단위 (0) | 2023.09.14 |
HTML 다시 배우기 - 4. hyperlink / list / 멀티미디어 태그 / form (0) | 2023.09.09 |
HTML 다시 배우기 - 3. text 관련 태그 (0) | 2023.09.08 |
HTML 다시 배우기 - 2. HTML 기본 태그 (0) | 2023.09.07 |