CSS 속성 선택자에 대해 공부해보자

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

 

첫 번째는 <p>이면서 class 속성에 bar가 있어야 적용.

두 번째는 class 속성에 foo와 bar가 모두 있어야 적용.

마지막은 id가 foo이며 class가 bar인 요소에 적용.

 

---

속성 선택자

단순 속성으로 선택

 

css

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

html

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

 

속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다.

요소에 해당 이름의 속성이 있다면 해당 사항이 적용됩니다.

 

출력

 

---

정확한 속성값으로 선택

 

정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택한다. 

 

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용됩니다.

 

 

---

부분 속성값으로 선택

 

부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다.

• [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
• [class^="bar"] (캐럿): class 속성의 값이 "bar"로 시작하는 요소 선택
• [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
• [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

css

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

html

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>