요소의 태그 명(type)을 이용한 선택 방식이다.
요소의 태그명을 사용한 선택 방식은 다음 두 가지 접근 방식이 있다.
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
.header h1 {
font-size: 2rem;
}
.footer > h2 {
font-size: 1.8rem;
}<wq-name> | <ns-prefix>? '*'
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
[ <ident-token> | '*' ]? '|'
<ns-prefix>? <ident-token>애트리뷰트가 선언되어 있는 대상을 선택자로 사용한다.
[ <ident-token> | '*' ]? '|'
p
p 태그명과 일치하는 경우에 선택자로 사용한다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| Selectors Level 4 | Last review date: 2023-2-23 | |
| Selectors Level 3 | Last review date: 2023-2-23 | |
태그의 타입을 이용한 선택자 패턴은 일반적으로 사용되지 않는다. 다만 CSS 코드 앞쪽에서 태그에 대한 초기화가 필요한 경우에 사용을 한다.
예를 들어서 h1 태그는 유저에이전트(웹브라우저) 기본 값으로 상하 마진을 가지고 있다. 만약에 이러한 기본 값이 필요하지 않다면 직접 작성자가 원하는 값으로 아래와 같이 초기화할 수 있다.
h1 {
margin: 0;
}다른 또 하나의 경우는 결합관계 선택자 패턴에서 사용을 할 수 있다. class를 정의하고 스타일을 적용할 필요까지 없다면 class 대신에 상위 요소와의 결합관계에서 태그 타입을 선택자로 결합해 사용할 수 있다. 예를 들어서 아래와 같이 사용할 수 있다.
.header > h1 {
margin: 0;
}