Post

선택자에 대해 알아보자!

Posted Updated
Preview Image
By kimyih 30 min read

목차

선택자의 종류들

  1. 선택자
  2. type 선택자
  3. id 선택자
  4. class 선택자
  5. 전체 선택자
  6. 하위 선택자
  7. 자식 선택자
  8. 인접 선택자
  9. 형제 선택자
  10. 그룹 선택자
  11. 속성 선택자
  12. 가상클래스 선택자
  13. 가상요소 선택자
  14. 종속 선택자
  15. 선택자의 우선순위

📍00) 선택자

선택자(Selector)는 CSS에서 스타일을 적용할 HTML 요소를 선택하는 방법을 정의하는데 사용됩니다.
선택자는 스타일 규칙이 적용될 요소를 식별하는 역할을 합니다.
HTML 요소의 종류, 클래스, ID 등을 사용하여 요소를 선택할 수 있습니다.

📍01) type 선택자

“Type 선택자”는 CSS에서 사용되는 선택자 중 가장 기본적인 형태입니다. 이 선택자는 HTML 요소의 태그명 또는 유형을 사용하여 해당 요소를 선택하여 스타일을 적용합니다.

예를 들어, 웹 페이지에는 다양한 HTML 요소가 있습니다.

1

<h1>, <p> <div> <span> 등이 있습니다.

각 요소는 특정한 목적을 가지며, 웹 페이지의 구조와 내용을 표현합니다.

Type 선택자를 사용하여 특정 HTML 요소를 선택하고 스타일을 적용할 수 있습니다.

예를 들어, 모든 h1을 넣어서 이렇게

요소에 대해 특정 글꼴을 적용하거나

<p>를 이용해 <p> 이렇게 <p> 단락을 나누며 쓸 수 있습니다 <p>

요소에 대해 특정한 글자색을 적용하는 등의 작업이 가능합니다.

📍02) id 선택자

“id 선택자”는 CSS에서 사용되는 선택자 중 하나로, HTML 요소를 특정하고자 할 때 사용됩니다. 이 선택자는 HTML 요소의 <id> 속성 값을 기반으로 요소를 선택하여 스타일을 적용합니다.

HTML 요소에는 <id> 속성을 지정하여 해당 요소를 고유하게 식별할 수 있습니다.
이 <id> 속성 값은 CSS에서 선택자로 사용될 수 있습니다. “id 선택자”는 이러한 <id> 속성 값을 사용하여 해당 요소를 선택합니다.

예를 들어, 웹 페이지에서 특정한 요소에만 스타일을 적용하고 싶을 때 “id 선택자”를 사용합니다.
예를 들어, 웹 페이지의 헤더 부분에만 특정한 배경색과 글꼴을 적용하고 싶을 때, 헤더 요소에 <id> 속성을 지정하고, CSS에서 이 <id> 값을 사용하여 스타일을 지정할 수 있습니다.

“id 선택자”는 CSS에서 “#” 기호를 사용하여 정의됩니다. 선택자 뒤에 “#” 기호와 해당 요소의 id 속성 값을 적으면 됩니다.

예를 들어, 웹 페이지의 헤더 요소에 <header>라는 id를 지정한 경우, CSS에서 이를 선택하기 위해선 “#header”라고 적으면 됩니다.

“id 선택자”는 HTML 문서 내에서 유일한 요소를 선택하는 데 사용되므로, 한 페이지에 하나의 요소에만 사용하는 것이 일반적입니다. 이를 통해 웹 페이지의 특정 부분에 특별한 스타일을 적용할 수 있습니다.

📍03) class 선택자

“class 선택자”는 CSS에서 사용되는 선택자 중 하나로, 특정한 그룹의 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 이 선택자는 HTML 요소에 지정된 “class” 속성을 기반으로 요소를 선택합니다.

HTML 요소에는 “class” 속성을 사용하여 해당 요소를 그룹화하거나 식별할 수 있습니다. 이 “class” 속성은 하나 이상의 HTML 요소에 동일한 값을 부여하여 해당 요소들을 하나의 그룹으로 묶을 수 있습니다.

“class 선택자”는 CSS에서 “.” 기호를 사용하여 정의됩니다. 선택자 뒤에 “.” 기호와 해당 요소의 class 속성 값을 적습니다.

예를 들어, 웹 페이지에서 모든 헤더 요소에 동일한 스타일을 적용하고 싶은 경우, 헤더 요소들에 동일한 class 값을 지정하고, CSS에서 이 class 값을 사용하여 스타일을 지정할 수 있습니다.

간단한 예시를 살펴보겠습니다. 다음 HTML 코드는 클래스가 “header”인 요소들에 동일한 스타일을 적용합니다.

이것은 헤더입니다.

이것은 헤더와 관련된 문단입니다.

1
2

<h1 class="header">이것은 헤더입니다.</h1>
<p class="header">이것은 헤더와 관련된 문단입니다.</p>

📍04) 전체 선택자

전체 선택자는 “*” 기호를 사용하여 정의됩니다. 이 선택자를 사용하면 HTML 문서의 모든 요소가 선택되어 스타일을 적용합니다.

간단한 예시를 살펴보겠습니다. 다음 CSS 코드는 HTML 문서 내의 모든 요소에 대해 글꼴을 Arial로 지정합니다.

1
2
3

* {
    font-family: Arial, sans-serif;
}

위의 코드에서 “*“는 “전체 선택자”입니다. 이 선택자는 HTML 문서 내의 모든 요소를 선택하여 해당 스타일을 적용합니다.
따라서 위의 예시에서는 HTML 문서 내의 모든 요소에 글꼴이 Arial로 지정됩니다.

전체 선택자를 사용하면 웹 페이지의 모든 요소에 쉽게 일관된 스타일을 적용할 수 있습니다.
또한 초기화 작업을 할 때도 유용하게 사용될 수 있습니다.
하지만 모든 요소를 선택하여 스타일을 적용하기 때문에 사용에 주의해야 합니다.
일부 요소에 대한 스타일을 무시하거나 예기치 않은 결과가 발생할 수 있기 때문입니다.

05) 하위 선택자

하위 선택자(하위 관계 선택자)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 하위 요소를 선택하여 스타일을 적용하는데 사용됩니다.
이 선택자는 부모 요소와 그의 직계 자식 요소 간의 관계를 기반으로 선택합니다.

하위 선택자는 공백으로 구분된 두 요소의 선택자로 정의됩니다.
첫 번째 선택자는 부모 요소를 선택하고, 두 번째 선택자는 그 부모 요소의 하위 요소를 선택합니다.
이때 두 선택자 사이에 공백이 있습니다.

간단한 예시를 살펴보겠습니다.
다음 CSS 코드는 모든<div> 요소의 하위에 있는 <p> 요소에 대해 글꼴을 Arial로 지정합니다.

1
2
3

div p {
    font-family: Arial, sans-serif;
}

위의 코드에서 “div p”는 “하위 선택자”입니다.
이 선택자는 모든 <div> 요소의 하위에 있는 모든 <p>요소를 선택하여 해당 스타일을 적용합니다.
즉, <div>요소 안에 있는 모든 <p> 요소에 대해 스타일이 적용됩니다.

하위 선택자는 HTML 문서의 요소 구조를 기반으로 스타일을 적용하는 데 유용합니다.
부모 요소와 직계 자식 요소 간의 관계를 명확히 지정하여 특정 요소의 스타일을 선택할 수 있습니다.
이를 통해 웹 페이지의 특정 부분에만 스타일을 적용하거나, 선택 범위를 제한할 수 있습니다.

📍06) 자식 선택자

자식 선택자(Child Selector)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 직계 자식 요소를 선택하여 스타일을 적용하는데 사용됩니다.
이 선택자는 부모 요소와 그의 직계 자식 요소 간의 관계를 기반으로 선택합니다.

자식 선택자는 부모 요소와 직계 자식 요소 사이에 > 기호를 사용하여 정의됩니다.
이 기호를 사용하여 두 개의 선택자를 구분합니다.

간단한 예시를 살펴보겠습니다.
다음 CSS 코드는 모든 <div> 요소의 직계 자식인 <p> 요소에 대해 글꼴을 Arial로 지정합니다.

1
2
3

div > p {
    font-family: Arial, sans-serif;
}

위의 코드에서 “div > p”는 “자식 선택자”입니다.
이 선택자는 모든 <div> 요소의 직계 자식인 <p> 요소를 선택하여 해당 스타일을 적용합니다.
즉, <div> 요소 안에 있는 직계 <p> 요소에 대해서만 스타일이 적용됩니다.

📍07) 인접 선택자

인접 선택자(Adjacent Sibling Selector)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 바로 인접한 형제 요소를 선택하여 스타일을 적용하는데 사용됩니다. 이 선택자는 선택한 요소의 다음에 바로 위치한 형제 요소를 선택합니다.

인접 선택자는 두 개의 선택자를 “+” 기호로 연결하여 정의됩니다.

간단한 예시를 살펴보겠습니다. 다음 CSS 코드는 <h2> 요소 다음에 바로 위치한 <p> 요소에 대해 스타일을 적용합니다.

1
2
3

h2 + p {
    font-weight: bold;
}

위의 코드에서 “h2 + p”는 “인접 선택자”입니다. 이 선택자는 <h2> 요소 바로 다음에 위치한 <p> 요소를 선택하여 해당 스타일을 적용합니다. 따라서 <h2> 요소와 인접한 <p> 요소에 대해 글꼴의 두께를 bold로 설정합니다.

인접 선택자를 사용하면 특정 요소의 바로 옆에 있는 형제 요소에만 스타일을 적용할 수 있습니다. 이를 통해 웹 페이지의 특정 부분에 대해 정확하게 스타일을 제어할 수 있습니다.

📍08) 형제 선택자

형제 선택자(Sibling Selector)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 형제 요소를 선택하여 스타일을 적용하는데 사용됩니다.
이 선택자는 선택한 요소와 동일한 부모를 가지고 있는 모든 형제 요소를 선택합니다.

형제 선택자는 선택한 요소와 동일한 레벨에 있는 다른 형제 요소를 선택합니다.
선택한 요소의 다음에 오는 형제 요소뿐만 아니라, 이전에 오는 형제 요소도 선택할 수 있습니다.

형제 선택자는 선택자 사이에 “~” 기호를 사용하여 정의됩니다.

간단한 예시를 살펴보겠습니다.
다음 CSS 코드는 <h2> 요소의 형제 중 모든 <p> 요소에 대해 스타일을 적용합니다.

1
2
3

h2 ~ p {
    color: red;
}

위의 코드에서 <h2> <p>는 “형제 선택자”입니다.
이 선택자는 <h2> 요소와 동일한 부모를 가지고 있는 모든 <p> 요소를 선택하여 해당 스타일을 적용합니다.
즉, “h2” 요소 다음에 오는 모든 <p> 요소에 대해 글자색을 빨간색으로 지정합니다.

형제 선택자를 사용하면 특정 요소와 동일한 레벨에 있는 다른 요소를 선택하여 스타일을 적용할 수 있습니다.
이를 통해 웹 페이지의 특정 부분에 대해 정확하게 스타일을 제어할 수 있습니다.

📍09) 그룹 선택자

그룹 선택자(Group Selector)는 CSS에서 사용되는 선택자 중 하나로, 여러 개의 요소를 동시에 선택하여 동일한 스타일을 적용하는데 사용됩니다.
이 선택자는 CSS 규칙을 그룹화하여 코드를 간결하고 효율적으로 관리할 수 있도록 도와줍니다.

그룹 선택자는 쉼표(,)를 사용하여 여러 개의 선택자를 연결하여 정의됩니다.

간단한 예시를 살펴보겠습니다.
다음 CSS 코드는 <h1>, <h2>, <h3> 요소에 대해 동일한 스타일을 적용합니다.

1
2
3
4

h1, h2, h3 {
    color: blue;
    font-family: Arial, sans-serif;
}

위의 코드에서 “h1, h2, h3”는 “그룹 선택자”입니다.
이 선택자는 <h1>, <h2>, <h3> 요소를 모두 선택하여 동일한 스타일을 적용합니다.
따라서 위의 예시에서는 이 세 가지 요소에 대해 글자색이 파란색으로, 글꼴이 Arial로 지정됩니다.

그룹 선택자를 사용하면 여러 요소에 동일한 스타일을 적용할 때 코드를 간결하게 작성할 수 있습니다.
또한 유사한 스타일을 가진 요소를 그룹으로 묶어서 관리할 수 있어서 코드의 가독성과 유지보수성을 높일 수 있습니다.

📍10) 속성 선택자

속성 선택자(Attribute Selector)는 CSS에서 사용되는 선택자 중 하나로, HTML 요소의 특정 속성을 가진 요소를 선택하여 스타일을 적용하는데 사용됩니다.
이 선택자는 HTML 요소의 특정 속성을 지정하여 해당 속성을 가진 요소를 선택합니다.

속성 선택자는 대괄호([]) 안에 속성 이름을 기입하여 정의됩니다.
이를 통해 해당 속성을 가진 모든 요소를 선택할 수 있습니다.

간단한 예시를 살펴보겠습니다.
다음 CSS 코드는 “href” 속성을 가진 모든 <a> 요소에 대해 글자색을 파란색으로 지정합니다.

1
2
3

a[href] {
    color: blue;
}

위의 코드에서 "a[href]"는 “속성 선택자”입니다.
이 선택자는 “href” 속성을 가진 모든 <a> 요소를 선택하여 해당 스타일을 적용합니다.
따라서 위의 예시에서는 “href” 속성을 가진 모든 링크에 대해 글자색이 파란색으로 지정됩니다.

속성 선택자를 사용하면 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 요소
a[helf^=mailto"]href 속성값이 ‘mailto’로 시작하는 a 요소

📍11) 가상클래스 선택자

가상 클래스 선택자(Pseudo-class Selector)는 CSS에서 사용되는 선택자 중 하나로, 특정 상태나 조건에 따라 요소를 선택하여 스타일을 적용하는데 사용됩니다.
이 선택자는 HTML 요소가 특정 상태에 있거나 사용자의 상호작용에 따라 다른 스타일을 적용할 때 유용하게 활용됩니다.

가상 클래스 선택자는 콜론(:)으로 시작하며, 선택자 뒤에 가상 클래스 이름을 추가하여 정의됩니다.

일반적으로 사용되는 몇 가지 가상 클래스 선택자에는 다음과 같은 것들이 있습니다.

가상 클래스 선택자설명
:hover마우스가 요소 위에 올라가 있을 때 적용됨
:active요소가 활성화될 때 적용됨
:focus요소가 포커스를 받았을 때 적용됨
:visited방문한 링크의 스타일을 지정함
:first-child부모 요소의 첫 번째 자식 요소에 스타일을 지정함
:last-child부모 요소의 마지막 자식 요소에 스타일을 지정함
:nth-child()지정된 수의 자식 요소에 스타일을 지정함
:nth-of-type()지정된 유형의 요소 중에서 지정된 수의 요소에 스타일을 지정함

📍12) 가상요소 선택자

가상 요소 선택자(Pseudo-element Selector)는 CSS에서 사용되는 선택자 중 하나로, HTML 요소의 특정 부분을 선택하여 스타일을 적용하는데 사용됩니다.
이 선택자는 HTML 요소의 내부나 외부에 새로운 요소를 생성하여 스타일을 적용하는 데 사용됩니다.

가상 요소 선택자는 콜론(::)으로 시작하여 선택자 뒤에 가상 요소의 이름을 추가하여 정의됩니다.
이때 콜론을 두 번 사용합니다. 예를 들어, ::before, ::after, ::first-line 등이 일반적으로 사용되는 가상 요소 선택자입니다.

가상 요소 선택자는 HTML 문서에 실제로 존재하지 않는 요소에 스타일을 적용할 때 사용됩니다.
이를 통해 특정 요소의 내용 앞이나 뒤에 새로운 콘텐츠를 추가하거나, 요소의 첫 번째 줄에 스타일을 적용하는 등 다양한 스타일링 기능을 구현할 수 있습니다.

가상 요소 선택자설명
:first-letter요소의 첫 글자
:first-line요소의 첫 줄
:first-child같은 요소 중 첫번째 요소
:last-child같은 요소 중 마지막 요소
:nth-child(n)같은 요소 중 n번째 요소
::before선택한 요소의 내부 앞에 새로운 콘텐츠를 추가함
::after선택한 요소의 내부 뒤에 새로운 콘텐츠를 추가함

간단한 예시를 보여드리겠습니다.
CSS 코드는 <p> 요소의 첫 번째 줄에 대해 다른 스타일을 적용합니다.

1
2
3
4
5

p::first-line {
    font-weight: bold;
    font-size: 120%;
    color: blue;
}

위의 코드에서 p::first-line은 가상 요소 선택자입니다.
이 선택자는 <p> 요소의 첫 번째 줄에 해당하는 가상 요소를 선택하여 해당 스타일을 적용합니다.
따라서 위의 예시에서는 <p> 요소의 첫 번째 줄이 굵은 글씨로, 크기가 120%로, 파란색으로 표시됩니다.

가상 요소 선택자를 사용하면 HTML 문서의 특정 부분에 스타일을 적용하는 데 유용하게 사용됩니다.
이를 통해 콘텐츠를 꾸며서 더 많은 디자인 요소를 추가할 수 있습니다.

📍13) 종속 선택자

종속 선택자(Child Combinator Selector)는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 직계 자식 요소를 선택하는데 사용됩니다. 이 선택자는 부모 요소와 그의 직계 자식 요소 사이의 관계를 기반으로 선택합니다.

종속 선택자는 부모 요소와 직계 자식 요소 사이에 > 기호를 사용하여 정의됩니다. 이 기호를 사용하여 두 개의 선택자를 구분합니다.

간단한 예시를 통해 살펴보겠습니다. 다음 CSS 코드는 <div> 요소의 직계 자식인 <p> 요소에 대해 글꼴을 Arial로 지정합니다.

1
2
3

div > p {
    font-family: Arial, sans-serif;
}

위의 코드에서 “div > p”는 “종속 선택자”입니다.
이 선택자는 <div> 요소의 직계 자식인 <p> 요소를 선택하여 해당 스타일을 적용합니다. 따라서 위의 예시에서는 <div> 요소 안에 있는 모든 <p> 요소에 대해 글꼴이 Arial로 지정됩니다.

종속 선택자를 사용하면 특정 요소의 직계 자식 요소에만 스타일을 적용할 수 있습니다. 이를 통해 웹 페이지의 특정 부분에 대해 정확하게 스타일을 제어할 수 있습니다.

📍14) 선택자의 우선순위

CSS에서 스타일 규칙이 적용될 때, 여러 스타일 규칙이 적용되는 경우가 있습니다.
이때 각 스타일 규칙의 우선순위에 따라 어떤 스타일이 적용될지 결정됩니다.
이를 선택자의 우선순위라고 합니다.

선택자마다 우선순위를 갓으로 매겨본다면 다음과 같습니다.

선택자우선순위
전체 선택자 (*)0
타입 선택자 (p, h1, ul, …)1
가상 선택자 (first-child, …)10
클래스 선택자 (a, b, c, …)10
ID 선택자 (#abc, …)100

이러한 우선순위를 이해하고 적용함으로써 원하는 스타일이 올바르게 적용되도록 할 수 있습니다.
일반적으로는 가능한 한 구체적인 선택자를 사용하고, !important 키워드는 최소한으로 사용하여 코드를 보다 유연하고 관리하기 쉽게 유지하는 것이 좋습니다.

HTML/CSS
selector
This post is licensed under CC BY 4.0 by the author.