비전공자를 위한 HTML/CSS-선택자3
선택자의 조합
/* 요소와 class의 조합 */
p.bar { ... }
/* 다중 class */
.foo.bar { ... }
/* id와 class의 조합 */
#foo.bar { ... }
첫 번째는 요소와 클래스를 조합한 경우입니다.
이 경우에는 <p>이면서 class 속성에 bar가 있어야 적용됩니다.
두 번째는 다중 클래스의 경우입니다.
이 경우에는 class 속성에 foo와 bar가 모두 있어야 적용됩니다.
마지막은 id와 class를 조합한 경우입니다.
이 경우에는 id가 foo이며 class가 bar인 요소에 적용됩니다.
속성 선택자
단순 속성으로 선택
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다.
요소에 해당 이름의 속성이 있다면 해당 사항이 적용됩니다.
위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드입니다.
첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용됩니다.
두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용됩니다.
바로 위 HTML 코드에는 3개의 <p>가 있습니다.
그렇다면 이 3개의 <p>에는 각자 어떤 스타일이 적용될까요?
먼저 예측을 하시고 직접 실습을 하는 게 좋습니다.
p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용됩니다.
p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용됩니다.
두 규칙 모두 속성의 값은 상관하지 않습니다.
정확한 속성값으로 선택
정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택합니다.
선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 됩니다.
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" 문자가 포함되는 요소 선택
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }
위의 코드에서는 모두 class 속성값으로 "color"를 선택합니다.
요소 순서대로 기호에 따라 규칙이 적용되는 결과는 다음과 같습니다.
p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
p[class$="color"] { font-style: italic; }
</style>
</head>
<body>
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
</body>
</html>
참고자료
