CSS [attribute^=”value”] 선택자 – 특정 값으로 시작하는 속성 선택

`[attribute^="value"]` 선택자

[attribute^="value"] 선택자는
지정된 attribute라는 이름의 속성이 value라는 값으로 시작하는 모든 요소를 선택합니다.

예를 들어, [href^="#"]은 href="#subject-1", href="#contact" 등의 속성과 값이 있는 요소들을 모두 선택합니다.

[attribute^="value"] 선택자는 값이 접두사 value로 시작하는 attribute 속성이 있는 요소를 나타냅니다.
attribute 속성의 값이 빈 문자열("")이면 선택자는 아무 것도 나타내지 않습니다.

지정된 속성의 이름은 대소문자를 구분하지 않지만, 값은 대소문자를 구분합니다.

예제

CSS

/* href 속성의 값 중에서
   "#"이라는 값으로 시작하는 모든 요소를 선택합니다. */
[href^="#"] {
    background-color: darkblue;
    color: white;
}
[href^="#"]::after {
    content: " 👇";
}

CSS ::after 가상 요소 선택자 사용 방법

웹 페이지에서 이모지(이모티콘) 사용하기

HTML

<p>다음의 링크를 참조하세요.</p>
<ul>
    <li><a href="#subject-1">주제-1</a></li>
    <li><a href="#contact">연락</a></li>
    <li><a href="https://example.com/">Example Domain</a></li>
</ul>

구문

다음의 두 가지 형태는 모두 동일합니다.

[attribute^="value"]
[attribute^='value']

CSS

[href^="#"] {
    background-color: darkblue;
    color: white;
}

/* 다음과 같이 작성해도 동일합니다. */
[href^='#'] {
    background-color: darkblue;
    color: white;
}

참고 사항

[attribute^="value"]는 속성이 특정 값으로 시작하는 요소를 선택하지만,
[attribute$="value"] 선택자는 특정 값으로 끝나는 요소를 선택합니다.

[attribute$="value"] 선택자

CSS

/* href 속성의 값 중에서
   ".html"이라는 값으로 끝나는 모든 요소를 선택합니다. */
[href$=".html"] {
    background-color: darkblue;
    color: white;
}
[href$=".html"]::after {
    content: " 📗";
}

HTML

<p>다음의 링크를 참조하세요.</p>
<ul>
    <li><a href="home.html">홈</a></li>
    <li><a href="contact.html">연락</a></li>
    <li><a href="https://example.com/">Example Domain</a></li>
</ul>

속성에 관련된 선택자

다음은 [attribute^="value"] 선택자 이외의 속성에 관련된 선택자들입니다.

속성에 관련된 선택자
[attribute]	이름이 일치하는 속성 선택
[attribute="value"]	이름과 값이 일치하는 속성 선택
[attribute*="value"]	특정 문자열을 포함하는 값이 있는 속성 선택
[attribute~="value"]	특정 단어을 포함하는 값이 있는 속성 선택
[attribute$="value"]	특정 값으로 끝나는 속성 선택