By aPOST in CSS — 2023년 12월 23일

클래스와 속성값을 문자열로 검색하는 5가지 CSS 선택자 사용법

클래스, 또는 속성 값의 일부를 매칭 해서 원하는 요소들을 선택할 수 있는 다양한 CSS 선택자가 제공됩니다.

그중에서 활용도가 가장 높고 빈번하게 사용하는 5가지 주요한 검색 매칭 선택자를 알아보겠습니다.

CSS 선택자 매칭에 사용하는 예제 HTML은 다음과 같습니다.

<html>
    <body>
        <div class="article1_intro">소개말</div>
        <div class="article1_section1">섹션1</div>
        <div class="article1_Section2">섹션2</div>
        <div class="article1_section3">섹션3</div>
        <div class="article1_outro">맺음말</div>
        <div class="paging prev"><a class="" href=" href="https://apost.dev"">이전글</a></div>
        <div class="paging next"><a href="http://apost.dev">다음글</a></div>
    </body>
</html>

클래스와 속성 값을 문자열로 검색, 매칭 할 때는 꺽쇠 괄호([], 브래킷)로 감싸서 표시합니다.

"[class='paging']" 매칭은 클래스에 "paging" 이 있는 HTML 문서 안의 모든 요소를 선택하는 것입니다.

문자열 매칭을 선택자 뒤에 붙여서 사용하면 선택된 요소 목록 중에서 클래스, 속성 값이 매칭 되는 요소만 선택합니다.

"div[class='paging']" 매칭은 "div" 블록 태그들 중에서 "paging" 클래스가 있는 요소만 선택합니다.

1. 클래스 이름 일부를 가진 요소들을 선택

[class*='article1_'] {
    border: 3px solid #000;
}

"*=" 매칭은 검색 조건에 일치하는 문자열이 포함된 요소를 선택합니다.

"[class*='article_']" 매칭은 클래스에 "article_" 문자열이 포함된 있는 요소들을 모두 선택합니다.

예제에서는 5개가 선택되며, 두께 3px의 두꺼운 테두리선을 선택된 요소에 표시합니다.

2. 대소문자 구분 없이 선택

[class*='_section'] {
    padding: 10px;
}

클래스 이름은 대소문자를 구분합니다.

클래스명을 사용할 때 소문자와 "-", "_", 숫자 조합만을 사용하는 것을 권장하고, 또 대부분 그렇게 사용하지만, 어쨌든 대문자 사용이 허용되며, "section"과 "Section" 클래스 이름은 다른 클래스 이름으로 인식됩니다.

앞의 클래스 문자열 매칭 선택자는 "섹션1"과 "섹션3"만 선택됩니다.

"섹션2"의 클래스 이름은 "article1_Section2"로 대문자 클래스 이름이기 때문에 선택이 되지 않습니다.

대소문자 구분 없이 매칭이 되도록 하려면 다음처럼 매칭 문자열 뒤에 공백의 띄워서 "i" 옵션을 추가하면 대소문자를 무시하고 문자열 매칭을 합니다.

다음 클래스 이름 문자열 매칭은 "섹션1", "섹션2", "섹션3"이 모두 선택됩니다.

[class*='_section' i] {
    padding: 10px;
}

3. 클래스 속성이 있으면 선택

a[class]{
    color: #0a0;
    font-weight: bold;
    text-decoration: none;
}

클래스(class)와 스타일(style)은 CSS를 표현하는 태그의 속성 중 하나입니다.

특히 태그의 클래스 속성은 속성과 속성값으로 끝나는 것이 아니라 클래스를 정의한 다른 위치의 클래스 정의를 참조하는 역할을 하기 때문에 특별히 클래스라고 구분지어서 부르고, 또 특별하게 사용하지만, 기본적으로 태그의 속성과 속성 값이라는 기본 구조의 일부입니다.

태그에 클래스 속성이 있는 태그만을 선택할 때는 "[class]" 와 같이 값 없이 속성 이름만을 표시합니다. 다른 속성들도 마찬가지로 속성 이름만을 표시합니다. 하이퍼링크 속성이 있는 태그만을 선택할 때는 "[href]"와 같이 표시합니다.

실제 속성의 값이 있는지는 확인하지 않고 속성이 명시되어있는지만 확인합니다.

다음 3가지는 "a[href]" 매칭으로 모두 선택됩니다.

<a href></a>

<a href=""></a>

<a href="https://apost.dev"></a>

4. 속성 값을 다중 문자열 검색으로 검색

a[href^='https:'][href$='com'] {
    color: #00a;
}

색 매칭 조건을 여러 개 사용해서 원하는 조건에 맞는 요소를 선택할 수도 있습니다.

앞서 사용한 문자열 매칭 연산자는 검색하려는 문자열이 포함되어 있는지를 찾는 "*="입니다.

이 연산자와 함께 "^=", "$=" 두 개의 매칭 연산자를 추가로 지원합니다.

새로운 두 연산자는 매칭을 시작하는 위치를 한정하는 연산자로 "^=" 연산자는 문자열 맨 앞에서부터, "$=" 연산자는 문자열 맨 끝에서부터 매칭을 합니다.

패턴은 일치하지만 관련이 없는 문자열까지 매칭이 될 가능성이 있는 "*="을 대신해 "^="과 "$=" 연산자를 사용하면 매칭 범위를 한정할 수 있어 조금 더 빠르고 정확하게 매칭을 할 수 있습니다.

"[href^='https:'][href$='com']" 매칭은 "href" 속성 값이 "https:"로 시작하고 "com"으로 끝나는 요소를 선택합니다.

5. 속성이 없는 태그만 선택

a:not([class]){
    text-decoration: line-through;
}

특정 속성이 없는 요소만 선택할 때는 ":not" 가상 클래스를 이용해야 합니다.

":not()" 가상 클래스는 선택자로 선택한 목록 중에서 괄호 안의 조건에 해당하는 요소를 제외하고 나머지만 선택하는 한정자 역할을 합니다.

괄호 안의 조건은 속성이 될 수도 있고, 속성 값이 될 수도 있습니다.

":not(class)" 한정자는 class 속성이 없는 요소만 선택하도록 한정합니다.

"div:not([class*='section'])" 한정자는 "div" 요소들 중에서 클래스 이름에 "section" 문자열이 포함되지 않은 요소만 선택합니다.