CSS

선택자(selector) 14가지 종류

hyejeong3283 2023. 2. 25. 01:48
728x90
반응형

선택자란 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. 선택자의 우선순위

  1. !important
  2. 인라인 스타일 (style 속성)
  3. ID 선택자
  4. 클래스 선택자, 속성 선택자, 가상 클래스 선택자
  5. 요소 선택자, 가상 요소 선택자
  6. 전체 선택자

위에서부터 아래로 내려갈수록 우선순위가 낮아지며, 동일한 우선순위를 가진 선택자 중에서는 나중에 나온 것이 우선합니다.

최우선으로 CSS에 적용해야 할 경우에는 선택자에 속성을 부여하는 마지막에 " !important "를 붙이면 됩니다.

 

이러한 우선순위를 이해하고 적절히 사용하면 CSS 스타일링을 보다 효율적으로 할 수 있습니다.