attribute selector

목차

• [속성명]
• [속성명 = 속성값]
• [속성명 ~= 속성값]
• [속성명 |= 속성값]
• [속성명 ^= 속성값]
• [속성명 $= 속성값]
• [속성명 *= 속성값]

---

 [속성명]

특정 속성이 있는 요소 선택

 

p[target] : p태그안에 target속성이 있다면 적용

[target] {
    color: green;
}

<a href="https://www.naver.com" target="_self">네이버</a>

---

 

 [속성명 = 속성값]

속성값과 일치하는 요소 선택

[class = att_class] {
    color: red;
}

<h2 class="att_class">[속성명 = 속성값]</h2>
<h2 class="att_class2">[속성명 = 속성값]</h2>

---

 

 [속성명 ~= 속성값]

속성명 중에 속성값이 있는 요소

class속성 중 att 값이 있는 요소

[class ~= att] {
    color: aqua;
}

<h2 class="att_class att">[속성명 ~= 속성값]</h2>
<h2 class="att_class2 att">[속성명 ~= 속성값]</h2>
<h2 class="att_class">[속성명 ~= 속성값]</h2>

---

 

 [속성명 |= 속성값]

속성값이 완전일치 하거나, 속성값-~~ 인 요소

att2이거나, att2-h2이거나

[class |= att2] {
    color: coral;
}

<h2 class="att2-h2">[속성명 |= 속성값]</h2>
<h2 class="att2">[속성명 |= 속성값]</h2>

 [속성명 ^= 속성값]

특정 속성값으로 시작하는 요소

cook, coral 둘다 co로 시작함

[class ^= co] {
    color: brown;
}

<h2 class="cook">[속성명 ^= 속성값]</h2>
<h2 class="coral">[속성명 ^= 속성값]</h2>

 [속성명 $= 속성값]

특정 속성값으로 끝나는 요소

abbbk, 123bk 둘다 bk로 끝남

[class $= bk] {
    color: brown;
}

<h2 class="abbbk">[속성명 $= 속성값]</h2>
<h2 class="123bk">[속성명 $= 속성값]</h2>

 [속성명 *= 속성값]

속성값이 부분일치하는 요소

[class *= co] {
    color: cyan;
}

<h2 class="bk_cook">[속성명 *= 속성값]</h2>
<h2 class="co">[속성명 *= 속성값]</h2>
<h2 class="cook">[속성명 *= 속성값]</h2>
<h2 class="cook_bk">[속성명 *= 속성값]</h2>
<h2 class="123co123">[속성명 *= 속성값]</h2>

---

 

Github

Link