CSS의 선택자_두번째 | 속성선택자

안녕하세요 웹아이입니다.

속성선택자

태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정할 수 있습니다.

[속성] 형식

지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다.

<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라는 속성이 있는 요소를 찾아내 거기에 배경색을 노란색으로 적용합니다.

[속성 = 값] 형식

주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다.

<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”인 링크, 새 탭으로 열리는 링크에 배경색을 노란색으로 적용합니다.

[속성 ~= 값] 형식

[속성=값] 과 다르게 비교할 값이 여러 개일 경우, 그 중 하나만 일치해도 스타일을 적용합니다.

<style>
h4 [title~="웹아이"] {
    background:yellow;
}
h4 [title~="디벨로드"] {
    text-decoration:underline;
}
</style>

<h3>CSS의 선택자</h3>
<h4 title="웹아이">선택자</h4>
<h4 title="웹아이 디벨로드">속성 선택자</h4>
<h4 title="디벨로드">가상클래스 선택자</h4>

CSS의 선택자

선택자

속성 선택자

가상클래스 선택자

H4 태그 중 title의 값이 “웹아이”인 경우 배경색을 노란색으로 적용합니다.

H4 태그 중 title의 값이 “디벨로드”인 경우 글자에 밑줄을 적용합니다.

title이 “웹아이 디벨로드”인 경우 둘 다 적용합니다.

[속성 ^= 값] 형식

지정한 문자로 시작하는 속성값에 대해서만 스타일을 적용합니다.

<style>
h4 [title^="웹아이"] {
    background:yellow;
}
</style>

<h3>CSS의 선택자</h3>
<h4 title="웹아이 디벨로드">선택자</h4>
<h4 title="웹아이 코딩">속성 선택자</h4>
<h4 title="개발 웹아이">가상클래스 선택자</h4>

CSS의 선택자

선택자

속성 선택자

가상클래스 선택자

H4 태그중 title의 값이 “웹아이”로 시작하는 요소에 배경색을 노란색으로 적용합니다.

[속성 $= 값] 형식

지정한 문자로 끝나는 속성에 대해서만 스타일을 적용합니다.

CSS3부터 정의되었습니다.

<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로 끝나면 배경색을 노란색으로 적용합니다.

[속성 |= 값] 형식

속성이 지정한 값으로 시작하면 스타일을 적용합니다.

<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”이거나 뒤에 하이픈(-)이 있는 경우에 사용할 수 있습니다.

[속성 *= 값] 형식

속성값이 앞이나 뒤, 또는 중간 등 어느 위치에 있든지 해당값이 포함되어 있으면 스타일이 적용됩니다.

<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"가 포함되어 있으면 배경색을 노란색으로 적용합니다.

이상 스타일 시트의 속성을 이용한 선택자에 대해 알아보았습니다.