○ [속성 |= 속성값] - 특정 속성 값이 포함된 속성 요소를 선택한다
[속성 |= 속성값]은 역시 [속성 ~= 속성값] 선택자와 마찬가지로 특정 '속성값'을 가진 요소를 선택하는 선택자 유형입니다. 그럼 '~=' 과 차이점은 무엇일까요?
'~= 속성값'의 경우, 정확하게 해당 '속성값'을 가진 요소를 선택합니다. 하지만 '|= 속성값'의 경우에는 정확하게 속성값이 '속성값'이거나, '속성값-' 즉 하이픈으로 연결되는 속성까지 포함해서 선택하게 됩니다. 여기서 가장 큰 차이점이 생기게 됩니다. 예를 들어 아래의 선택자 작성 형태를 보겠습니다.
a[title |= us] {
// ....
}
위의 선택자에서는 <a> 태그 요소의 'title' 속성값이 "us"인 경우, 그리고 "us-"로 시작하는 경우를 의미하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
ul {
list-style: none;
}
li {
display: inline-block;
margin: 10px;
}
li a {
padding: 5px 20px;
font-size: 16px;
color: red;
text-decoration: none;
}
a[title |= "us"] {
background: url(images/us.png) no-repeat left center;
}
a[title |= "jap"] {
background: url(images/jp.png) no-repeat left center;
}
a[title |= "chn"] {
background: url(images/ch.png) no-repeat left center;
}
</style>
</head>
<body>
<li>언어별 속성</li>
<li><a href="#" title="us-english">ENG</a></li>
<li><a href="#" title="ja">JP</a></li>
<li><a href="#" title="chn">CN</a></li>
</body>
</html>
위의 경우 일본국기는 표시되지 않았습니다. 위에서 해당 속성을 "jap"로 지정했는데 실제 title 속성 값이 "jp"로 정의되었기 때문이죠. 정확히 "jap"이거나 "jap-..." 형태여야 적용됩니다.
○ [속성 ^= 속성값] - 특정 속성값으로 시작하는 속성 요소를 선택
위에서 "jap"로 선언한 속성값이 결국 "jp"에는 적용이 되지 않았죠? 이러한 경우를 해결하기 위해서, 즉 '정확하게 일치하지 않더라도' 지정한 속성 값으로 시작하는 경우도 지정이 필요할 것입니다. 이럴 때 "^= 속성값"을 사용하게 됩니다. 위의 경우처럼 특정 단어가 정확히 일치하거나 하이픈으로 이어지는 경우가 아닐 때 말이죠.
예를 들어보겠습니다.
a[title ^= "eng"] {
// ...
}
위의 값의 경우 요소의 title 속성값이 eng로 시작하는 경우에 해당합니다. "eng"여도 해당하고, "english"여도 해당하게 됩니다. 위에서 사용했던 예제를 살짝 바꾸어서 일본 국기가 표시되도록 해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
ul {
list-style: none;
}
li {
display: inline-block;
margin: 10px;
}
li a {
padding: 5px 20px;
font-size: 16px;
color: red;
text-decoration: none;
}
a[title |= "us"] {
background: url(images/us.png) no-repeat left center;
}
a[title ^= "ja"] {
background: url(images/jp.png) no-repeat left center;
}
a[title |= "chn"] {
background: url(images/ch.png) no-repeat left center;
}
</style>
</head>
<body>
<li>언어별 속성</li>
<li><a href="#" title="us-english">ENG</a></li>
<li><a href="#" title="jap">JP</a></li>
<li><a href="#" title="chn">CN</a></li>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 7. 가상 클래스와 가상 요소(1) - 가상 클래스 정의 (0) | 2023.06.10 |
|---|---|
| [CSS] 6. 고급 선택자(2) - 속성 선택자 3 (0) | 2023.06.06 |
| [CSS] 6. 고급 선택자(2) - 속성 선택자 1 (0) | 2023.05.30 |
| [CSS] 6. 고급 선택자(1) - 연결 선택자 2 (0) | 2023.05.24 |
| [CSS] 6. 고급 선택자(1) - 연결 선택자 1 (0) | 2023.05.20 |
