선택자(selector) 14가지 종류
선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.
CSS로 속성을 부여하는 형식은 다음과 같습니다.
{ } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 기술해도 무방합니다.
1. type 선택자
html 문서의 태그 이름을 선택자로 사용할 수 있습니다.
type 선택자는 html 요소의 타입에 따라 스타일을 적용합니다.
예를 들어, input 요소의 타입이 text인 경우, input[type="text"] 선택자를 사용하여 해당 요소에 스타일을 적용할 수 있습니다.
2. id 선택자
HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다.
CSS에서는 id 선택자 앞에 "#"을 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다.
#example {
color : red ;
font - size : 18px ;
}
3. class 선택자
HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다.
즉, 여러 개의 요소에 같은 class명을 부여할 수 있습니다. 또한 하나의 요소에 여러 개의 class명을 부여할 수도 있습니다.
CSS에서는 class 선택자 앞에 '.'을 붙여야 합니다.
.example {
color : red ;
font - size : 18px ;
}
4. 전체 선택자
전체 선택자는 페이지의 모든 요소를 가리키는 선택자로서 ' * '로 표시합니다.
어떤 id명이나 class명이 부여되었든 상관없이, 페이지 내의 모든 요소를 표시하도록 속성을 부여합니다.
그러나 불필요하게 전체 선택자를 사용하는 것은 속도를 저하시키는 원인이 되므로, 반드시 필요한 경우가 아니면 선택자를 정확하게 명시하는 것을 권장합니다.
* {
margin : 0 ;
padding : 0 ;
box-sizing : border - box ;
}
5. 하위 선택자
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다.
.container 클래스를 가진 요소의 하위에 있는 h1과 p 요소에 스타일을 적용합니다.
.container h1 {
color: blue;
font-size: 24px;
}
.container p {
color: gray;
font-size: 16px;
}
6. 자식 선택자
자식 선택자는 요소 내부에 있는 특정 요소를 선택할 때 사용되지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를 ' >'으로 분리합니다.
예를 들어, div > p 선택자는 div 요소의 직계 자식인 p 요소를 선택합니다. 이와 같은 방식으로, 자식 선택자를 사용하여 원하는 요소를 선택할 수 있습니다.
7. 인접 선택자
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 ' + '로 분리합니다.
예를 들어, h1 + p 선택자는 h1 요소 바로 뒤에 위치한 p 요소를 선택합니다. 이와 같은 방식으로, 인접 선택자를 사용하여 원하는 요소를 선택할 수 있습니다.
8. 형제 선택자
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며 ' ~ '로 구분합니다. 인접해 있지 않고 멀리 있어도 같은 계층에 있다면 속성이 부여됩니다.
즉, 같은 부모 요소를 가지고 있는 형제 요소 중 특정 요소를 선택할 때 사용됩니다.
예를 들어, h1 ~ p 선택자는 h1 요소 다음에 나오는 모든 p 요소를 선택합니다. 이와 같은 방식으로, 형제 선택자를 사용하여 원하는 요소를 선택할 수 있습니다.
반면 하위 계층에 있는 p 태그들에는 속성이 부여되지 않습니다.
9. 그룹 선택자
그룹 선택자는 여러 선택자들을 ' , '로 구분하여 함께 묶어 속성을 부여하는 것입니다. 여러 개의 요소를 동시에 선택할 때 사용됩니다.
예를 들어, h1, h2, h3 선택자는 h1, h2, h3 요소를 모두 선택합니다. 이와 같은 방식으로, 그룹 선택자를 사용하여 여러 요소를 선택할 수 있습니다.
10. 속성 선택자
HTML 요소의 속성 유무 또는 속성값을 중괄호 [ ] 안에 넣어 선택자로 사용할 수 있습니다.
속성 값 | 설명 |
h1[class] | class명을 가진 h1 요소 |
img[alt] | alt 속성을 가진 img 요소 |
p[class="abc"] | class명이 유일하게 'abc'인 p 요소 |
p[class~="abc"] | class명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p 요소 |
p[class|="abc"] | class명이 'abc'이거나 'abc~'로 시작하는 p 요소 |
p[class^="abc"] | class명이 철자 'abc'로 시작하는 p 요소 |
p[class$="abc"] | class명이 철자 'abc'로 끝나는 p 요소 |
p[class*="abc"] | class명이 철자 'abc'가 포함되어 있는 p 요소 |
a[href^="mailto"] | href 속성값이 'mailto'로 시작하는 a 요 |
11. 가상클래스 선택자
가상 클래스 선택자란 링크가 걸린 문자에 스타일을 부여하는 것입니다.
속성 값 | 설명 |
a : link | 링크가 걸린 문자에 속성을 부여하는 선택자 |
a : visited | 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자 |
a : hover | 링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 |
a : active | 링크 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만 경우) |
a : focus | 링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자 (키보드의 [Tab] 키 등으로 포커스가 나타날 경우 |
이 가상클래스를 둘 이상 사용할 경우 위 순서대로 기술합니다.
12. 가상요소 선택자
가상요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자입니다.
속성 값 | 설명 |
: first - letter | 요소의 첫 글자 |
: first - line | 요소의 첫 줄 |
: first - child | 같은 요소 중 첫 번째 요소 |
: last - child | 같은 요소 중 마지막 요소 |
: nth - child(n) | 같은 요소 중 n번째 요소 |
: before | 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소) |
: after | 요소 안 뒤 앞에 배치될 요소 (마크업에는 없는 가상 요소) |
: before 나 : after는 마크업할 당시에는 없었던 요소를 CSS에 넣어줄 때 사용할 수 있습니다. 새로 생성된 공간에 내용을 넣어줄 때에는 content 속성을 이용하여 content = " ~ " 와 같이 기술합니다.
: before 와 : after는 선택한 요소의 자식 요소 맨 처음과 맨 마지막에 생성됩니다.
또, 이렇게 생성된 가상 요소들은 인라인 특성을 가지고 있습니다. 가상 요소를 잘 이용하면 이름을 부여하지 않은 요소라도 정확히 선택할 수 있어 활용도가 높습니다.
<p> : before 행복하세요 : after <p>
13. 종속 선택자
종속 선택자는 type 선택자와 id 선택자, class 선택자가 결합된 형태입니다.
마크업이 위와 같을 때 #atxt 와 p#atxt 는 같은 선택자입니다. 다만 둘의 우선순위는 다릅니다.
< p id = " atxt " > 선택자의 다양한 표현 < /p >
p#atxt 가 #atxt 보다 높은 우선순위를 가지게 됩니다.
14. 선택자의 우선순위
- !important
- 인라인 스타일 (style 속성)
- ID 선택자
- 클래스 선택자, 속성 선택자, 가상 클래스 선택자
- 요소 선택자, 가상 요소 선택자
- 전체 선택자
위에서부터 아래로 내려갈수록 우선순위가 낮아지며, 동일한 우선순위를 가진 선택자 중에서는 나중에 나온 것이 우선합니다.
최우선으로 CSS에 적용해야 할 경우에는 선택자에 속성을 부여하는 마지막에 " !important "를 붙이면 됩니다.
이러한 우선순위를 이해하고 적절히 사용하면 CSS 스타일링을 보다 효율적으로 할 수 있습니다.