CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS 함수(Function)CSS 선택자 전체 가이드북

CSS3 [attribute$=value] 선택자

attribute 이름을 가진 속성이 있으며 속성 값이 "value"로 끝나는 요소를 나타냅니다。

완전한 CSS 선택자 참조 가이드

온라인 예제

href 속성이 있으며 속성 값이 ".org"로 끝나는 <a> 요소가 있으며, 다음과 같은 선택자로 선택됩니다

예제

!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 가이드(oldtoolbag.com)</title>　
<style>　
/*　href 속성이 있으며 속성 값이 ".org"로 끝나는 <a> 요소가 있으며, 다음과 같은 선택자로 선택됩니다　*/
a[href$=".org"]　{
　　color: red;
}
</style>
</head>
<body>
<div>
<ul>
　　<li><a href="#internal">Internal 링크</a></li>
　　<li><a href="http://example.com">Example 링크</a></li>
　　<li><a href="#InSensitive">Insensitive 내부 링크</a></li>
　　<li><a href="http://example.org">Example org 링크</a></li>
</ul>
</div>
</body>
</html>

테스트를 보세요 ‹/›

정의와 사용법

[attribute$=value] 선택자는 특정 값으로 끝나는 속성 값을 가진 요소와 일치합니다。

브라우저 호환성

IEFirefoxOperaChromeSafari

모든 주요 브라우저는 [attribute$=value] 선택자。

Note: [attribute$=value] IE8중에서 실행되는 경우, 선언해야 합니다!DOCTYPE 。

온라인 예제

class 속성 값을 "test"로 끝내는 모든 요소의 배경색을 설정합니다：

예제

!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8">　
<title>기본 가이드(oldtoolbag.com)</title>　
<style>　
[class$="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">제1개 DIV 요소.</div>
<div class="second">제2개 DIV 요소.</div>
<div class="test">제3개 DIV 요소.</div>
<p class="test">이것은 평범한 텍스트 파라그래프.</p>
</body>
</html>

테스트를 보세요 ‹/›

완전한 CSS 선택자 참조 가이드

CSS 함수(Function)CSS 선택자 전체 가이드북