css: 선택자 3

선택자의 조합

선택자들끼리 조합이 가능합니다.

<div>
  <h1 id="text" class="two">첫 번째 제목</h1>
  <p>첫 번째 설명</p>
</div>
<div>
  <h1>두 번째 제목</h1>
  <p class="text two">두 번째 설명</p>
</div>

h1.text {color: red;}

이 경우에는 <h1>이면서 class 속성에 text가 있어야 적용됩니다.

---

.text.two {color: blue;}

이 경우에는 class 속성에 text text 가 있어야 적용됩니다.

---

#text.two {color: yellow;}

이 경우에는 id가 foo이며 class가 bar 인 요소에 적용됩니다.

---

속성 선택자

<div>
  <p>첫 번째 제목</p>
  <p class="two">두 번째 제목</p>
  <p id="three" class="three">세 번째 제목</p>
</div>

h1[class] {color: red;}

이 경우에는 <p> 태그에 class가 있는 요소에 적용됩니다.
두 번째 제목, 세 번째 제목 색상이 빨간색으로 됩니다.

h1[id][class] {color: blue;}

이 경우에는 <p> 태그에 class가 있고 id가 있는 요소에 적용됩니다.
세 번째 제목 색상이 파란색으로 됩니다.

---

p[class="two"] {color: red;}

이 경우에는 <p>이면서 class 속성의 값이 foo이면 적용됩니다.

---

p[id="three"] {color: blue;}

이 경우에는 <p>이면서 id 속성의 값이 three이면 적용됩니다.