속성선택자
태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정할 수 있습니다.
[속성] 형식
지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다.
<![CDATA[<style>
a[href] {
background:yellow;
}
</style>
<h3>선택자</h3>
<ul>
<li>
<a href="one.html">속성 선택자</a>
</li>
<li>
<a href="two.html">가상클래스 선택자</a>
</li>
</ul>]]>
적용결과:
선택자
·
속성 선택자
·
가상클래스 선택자
A 태그 중 href라는 속성이 있는 요소를 찾아내 거기에 배경색을 노란색으로 적용합니다.
[속성 = 값] 형식
주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다.
<![CDATA[<style>
a [target="_blank"] {
background:yellow;
}
</style>
<h3>선택자</h3>
<ul>
<li>
<a href="one.html" target="_blank">속성 선택자</a>
</li>
<li>
<a href="two.html">가상클래스 선택자</a>
</li>
</ul>]]>
적용결과:
선택자
·
속성 선택자
· 가상클래스 선택자
A 태그 중에서 target=“_blank”인 링크, 새 탭으로 열리는 링크에 배경색을 노란색으로 적용합니다.
[속성 ~= 값] 형식
[속성=값] 과 다르게 비교할 값이 여러 개일 경우, 그 중 하나만 일치해도 스타일을 적용합니다.
<![CDATA[<style>
h4 [title~="웹아이"] {
background:yellow;
}
h4 [title~="디벨로드"] {
text-decoration:underline;
}
</style>
<h3>CSS의 선택자</h3>
<h4 title="웹아이">선택자</h4>
<h4 title="웹아이 디벨로드">속성 선택자</h4>
<h4 title="디벨로드">가상클래스 선택자</h4>]]>
적용결과:
선택자
속성 선택자
가상클래스 선택자
H4 태그 중 title의 값이 “웹아이”인 경우 배경색을 노란색으로 적용합니다.
H4 태그 중 title의 값이 “디벨로드”인 경우 글자에 밑줄을 적용합니다.
title이 “웹아이 디벨로드”인 경우 둘 다 적용합니다.
[속성 ^= 값] 형식
지정한 문자로 시작하는 속성값에 대해서만 스타일을 적용합니다.
<![CDATA[<style>
h4 [title^="웹아이"] {
background:yellow;
}
</style>
<h3>CSS의 선택자</h3>
<h4 title="웹아이 디벨로드">선택자</h4>
<h4 title="웹아이 코딩">속성 선택자</h4>
<h4 title="개발 웹아이">가상클래스 선택자</h4>]]>
적용결과:
CSS의 선택자
선택자
속성 선택자
가상클래스 선택자
H4 태그중 title의 값이 “웹아이”로 시작하는 요소에 배경색을 노란색으로 적용합니다.
[속성 $= 값] 형식
지정한 문자로 끝나는 속성에 대해서만 스타일을 적용합니다.
CSS3부터 정의되었습니다.
<![CDATA[<style>
a [href $= "hwp"] {
background:yellow;
}
</style>
<h3>선택자</h3>
<ul>
<li>
<a href="one.hwp">속성 선택자</a>
</li>
<li>
<a href="two.xls">가상클래스 선택자</a>
</li>
</ul>]]>
적용결과:
선택자
·
속성 선택자
· 가상클래스 선택자
A 태그의 href속성 값 중에서 hwp로 끝나면 배경색을 노란색으로 적용합니다.
[속성 |= 값] 형식
속성이 지정한 값으로 시작하면 스타일을 적용합니다.
<![CDATA[<style>
a [class |= "red"] {
background:yellow;
}
</style>
<h3>선택자</h3>
<ul>
<li>
<a class="red" href="one.hwp">속성 선택자</a>
</li>
<li>
<a class="red-bg" href="two.xls">가상클래스 선택자</a>
</li>
</ul>]]>
적용결과:
선택자
·
속성 선택자
·
가상클래스 선택자
A 태그 중 class 속성이 “red”로 시작하면 배경색을 노란색으로 적용합니다.
정확하게 “red”이거나 뒤에 하이픈(-)이 있는 경우에 사용할 수 있습니다.
[속성 *= 값] 형식
속성값이 앞이나 뒤, 또는 중간 등 어느 위치에 있든지 해당값이 포함되어 있으면 스타일이 적용됩니다.
<![CDATA[<style>
a [class *= "red"] {
background:yellow;
}
</style>
<h3>선택자</h3>
<ul>
<li>
<a class="red bg" href="one.hwp">속성 선택자</a>
</li>
<li>
<a class="red-bg" href="two.xls">가상클래스 선택자 1</a>
</li>
<li>
<a class="bg-red" href="two.xls">가상클래스 선택자 2</a>
</li>
</ul>]]>
적용결과:
선택자
·
속성 선택자
·
가상클래스 선택자1
·
가상클래스 선택자2
A 태그 중 class의 속성값에 "red"가 포함되어 있으면 배경색을 노란색으로 적용합니다.
이상 스타일 시트의 속성을 이용한 선택자에 대해 알아보았습니다.
