CSS 선택자 (Selector)

codeConnection 2025. 4. 9.

CSS 선택자(Selector)란?

CSS를 정의하다 보면 HTML의 특정 요소를 정확하게 선택해야 하는 일이 많이 생긴다.

그렇지 않으면 의도하지 않은 대로 스타일이 적용될 수 있기 때문이다.

물론 in-line 방식으로 요소마다 전부 태그 안에 style 속성을 주어 하나하나 스타일을 적용해주면 CSS를 선택해 줄 필요는 없겠지만, 문서가 긴 경우에는 매번 그렇게 하기 어렵고, 스타일이 중복되는 경우에 재활용하는 측면에서도 비효율적이기에 CSS를 위해서 HTML 요소마다 특정한 선택자를 부여해줄 수 있다.

CSS 선택자의 종류

태그(tag) 선택자

말 그대로 요소 자체를 이야기 하는 것이다. 즉 div 태그면 div 태그, span 태그면 span 태그 자체를 전부 통 틀어서 선택하겠다는 의미이다.

사용 방법은 CSS에 태그 자체를 넣고 객체 형태로 CSS의 속성과 값을 정의해주면 된다.

텍스트가 세 줄 있는 것처럼 보이지만 위 예제에서는 <span> 태그 자체에 color: red 스타일을 적용해버렸기 때문에 <strong> 태그는 건너 뛰고 문서 내에 존재하는 모든 <span> 태그에 스타일이 적용된 것을 볼 수 있다.

/* Tag Selector */

tag {
  property: value;
}

id 선택자

CSS의 in-line 적용 방식 다음으로 우선순위를 갖는 방식이다.

HTML 요소 내에서 id라는 속성을 주고 부여한 값이 그 요소의 고유한 id가 된다.

id는 HTML 문서 내에서 단 하나만 가질 수 있다는 특징이 있다. 그래서 고유하다고 말하는 것이다.

/* ID Selector */

#id {
  property: value;
}

아까 예제로 들었던 Tag Selector와 같은 HTML이지만, 두번째 <span> 태그에 id라는 속성이 부여됐다. 그렇게 되면서 두번째 <span> 태그만의 고유한 이름이 생겨났고, CSS에서는 #이름의 형태로 이 문서 전체에서 단 하나의 요소만 지목하여 속성을 부여하게 되었다.

<span> 태그가 두 개 있지만, id 선택자를 사용한 것이기에 이와는 상관없이 id가 일치하는 요소에만 스타일이 적용된 것을 볼 수 있다.

class 선택자

class는 .class와 같이 마침표를 찍어 표현한다.

class는 id와는 다르게 여러 개에 동시 중복 적용할 수 있다. 예를 들어 <span> 태그가 문서 내에서 100개가 사용됐는데 비슷한 성질의 요소들끼리 같은 class로 묶게 되면 CSS 스타일을 적용할 때 더 편리하게 적용할 수 있는 것이다.

/* Class Selector */

.class {
  property: value;
}

위 이미지를 보면 같은 클래스에 동시에 스타일이 적용된 것을 볼 수 있다.

자손 선택자 (선택자의 복합 사용)

문서들이 저렇게 간단한 구조면 좋겠지만 실제론 depth가 깊은 경우가 많다. 이럴 때에는 선택자들을 섞어서 복합적으로 사용하면 세밀하게 선택할 수 있다.

먼저 이해해야 하는 것은 HTML 요소에는 부모와 자식의 관계가 있다는 것이다. 코드를 입력할 때 들여쓰기로 들어가는 depth를 시각적으로 보면 이해가 빠르다.

<body>
  <div>
    <p>이것은 div 태그의 첫번째 자식입니다.</p>
    <p>이것은 div 태그의 두번째 자식입니다.</p>
  </div>
</body>

위 코드 예제를 보면 <div>라는 하나의 태그를 부모로 본다면, 이 <div> 태그 안에 포함된 자식은 두 개가 있다. 만약 <div> 태그 안에 또 <div>가 있고 그 <div> 안에 다른 태그가 있다면 그것은 손주가 된다.

각설하고 부모 자식 간의 관계는 위와 같이 설명한다.

그런데 이런 예제가 있을 수 있다.

<body>
  <p class="title">이것은 div 밖에 있는 title입니다.</p>
  <div class="box1">
    <p class="title">이것은 div 안에 있는 title입니다.</p>
  </div>
</body>

위 예제에서 title이라는 class가 두 개가 있다. 하나는 <body>의 자식이고 하나는 box1 이라는 class를 가진 div의 자식이다. 만약 CSS에서 .title 선택자로 스타일링하면 어떻게 될까?

title이라는 class를 가진 요소는 전부 다 스타일이 적용된다.

그런데 여기서 div 태그의 자식인 title에만 스타일을 적용하고 싶다면? 이 때 자손 선택자를 아래와 같이 사용한다.

.parent .child {
  property: value;
}

공백을 주고 부모 선택자와 자식 선택자를 함께 입력하면 된다.

부모가 class가 아닌 id여도 동일하다.

만약에 손주까지 내려간다면?

depth가 깊어 헷갈릴 수 있는데 CSS를 보면 밑줄 친 두 개의 관계만 적용시키고 있다. first-title은 적용하고 싶지 않다고 써놨는데 box-1-title이 자식 선택자로 되어 있으므로, 그 아래 div 텍스트들이 모두 적용됐다.

second-title에만 스타일을 적용하고 싶다면 CSS 자손 선택자에서 한 칸 더 띄고 한 번 더 들어가면 된다.

다중 선택자

위 자손 선택자에서 사이에 공백만 빼면 된다. 어떤 경우에 사용하냐면, 자손 관계가 명확하지 않을 때, 정확하게 하나를 딱 짚어내고자 할 때 사용한다.

위 이미지처럼 공백을 제거하고 그 요소를 가리키는 class와 id를 모두 선택해주면 된다.

그런데 여기서 궁금증이 생긴다. id는 어차피 전체 문서에서 고유하게 하나의 요소에만 가질 수 있는데, #id 선택자로 선택하면 끝날 것을 왜 그렇게 복잡하게 할까? 여기에는 여러가지 이유가 있다.

첫번째로 가독성 때문이다.

내가 선택한 요소가 정확하게 어떤 요소인지, 어떤 성격인지 파악하기 위해서 작성한다. 문서가 길고 복잡하다면 같은 class를 가진 요소들이 정말 많아지게 되는데, #id 하나만으로 정확하게 그 요소가 어떤 요소인지 네이밍하기란 쉽지 않을 수 있다. 보통 class 이름을 작명할 때 그 요소의 성격에 따라 구분하기 때문에 내가 CSS 선택자로 선택한 요소가 어떤 요소인지 CSS만 보고도 이해하기 편해진다는 점 때문이다.

두번째로 우선순위 때문이다.

아래와 같은 케이스가 있을 수 있다. 본래 id는 문서를 통틀어 하나만 존재해야 하지만, 에러와는 무관하게 브라우저는 그대로 렌더링을 해버리기 때문에 중복되는 id가 발생할 수도 있고, 또 CSS가 길어지면 중복되어 스타일을 적용할 수도 있다.

위 이미지를 보면 CSS 선택자가 같은 요소를 가리키고 있지만, #id 하나로만 선택한 것보다 .title#my-title이라는 다중 선택자로 선택한 것이 더 구체적으로 설명하고 있기 때문에 이 선택자의 스타일이 적용된 것을 볼 수 있다.

그런데 또 다른 궁금증이 생겼다.

다중선택자는 요소에 작성된 순서로만 가능한가? #my-title.title은 불가능한가? 결론은 아니다. CSS 선택자 순서는 전혀 관계가 없다. 다만 HTML 문서를 작성할 때 요소의 속성 순서를 신경 써서 작성했을 것이기 때문에 가독성 차원에서 순서대로 선택자를 지시하여 계층 구도를 표현하는 것이 가독성 측면에서 유리하다.

그런데 또또 다른 궁금증이 생겼다.

HTML에서는 하나의 요소에 id는 단 하나만 부여할 수 있지만, class는 여러 개 적용시킬 수 있다. 그러면 이 모든 클래스를 명시해줘야 할까?

거두절미하고 직접 실험해보자.

위 이미지들과 같이 class가 여러 군데서 활용되고 있을 때 이 다중 선택자의 진정한 진가가 발휘된다.

원래 내가 보고 있는 강의에서는 이렇게까지 자세하게 파고들진 않았지만, 개발 공부라는 게 참 재미있는 것 같다. 내 지적 호기심을 끊임없이 자극한다. "그럼 이것도 돼?" 이런 궁금증이 계속해서 생겨나고 직접 실험을 해보고 결과를 확인해나가는 과정이 프론트엔드의 매력인 것 같다.

저작자표시 비영리 변경금지 (새창열림)

'Programing > CSS' 카테고리의 다른 글

CSS의 Box Model (Padding, Margin, Border) (0)	2025.05.12
CSS 속성 : 폰트의 기본 속성 (0)	2025.05.12
CSS을 적용하는 방법 3가지 (0)	2025.04.08
CSS의 구성 요소 (Selectors, Property, value)와 우선순위 총 정리 (1)	2025.03.10
CSS란? (0)	2025.03.04

CSS 선택자 (Selector)