CSS [attribute*="value"] 선택자란?
CSS의 [attribute*="value"] 선택자는 지정한 속성 값 안에 특정 하위 문자열이 포함된 모든 요소를 선택할 때 사용합니다. 예를 들어, href 속성 값에 "java"라는 문자열이 포함된 모든 <a>(링크) 요소를 선택하려면 다음과 같이 작성하면 됩니다.
[href*="java"] { ... }예제 코드
아래 코드를 실행하면 href 속성에 "java"가 포함된 링크에만 주황색 테두리가 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
[href*=java] {
border: 5px solid orange;
border-radius: 5px;
}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com/php/index.htm">PHP 튜토리얼</a>
<a href="https://tutorialspoint.com/java/index.htm">Java 튜토리얼</a>
</body>
</html>결과 및 코드 설명
위 예제에는 두 개의 링크가 있지만, href 속성 값에 "java"가 포함된 링크는 "Java 튜토리얼" 하나뿐입니다. 따라서 이 링크에만 스타일이 적용되어 5px 두께의 주황색 테두리와 둥근 모서리가 나타납니다.
- [href*=java] : href 속성 값 어디든 "java"라는 하위 문자열이 포함되어 있으면 해당 요소를 선택합니다.
- border : 선택된 요소에 5px 두께의 주황색 실선 테두리를 추가합니다.
- border-radius : 테두리의 모서리를 둥글게 처리합니다.
함께 알아두면 좋은 선택자
유사한 속성 선택자로는 속성 값이 특정 문자열로 시작하는 요소를 선택하는 [attribute^="value"], 특정 문자열로 끝나는 요소를 선택하는 [attribute$="value"]가 있습니다. 상황에 맞게 활용하면 더욱 정교한 스타일링이 가능합니다.