[CSS] 선택자(selector)- 조합과 속성 선택자

---

---

조합

선택자는 서로 조합할 수 있다. 

요소와 클래스의 조합

p.bar{...}

p태그이면서 클래스로 bar가 있어야 규칙이 적용 된다

 

다중 클래스

.foo.bar{...}

foo와 bar가 클래스 속성 안에 둘 다 있는 경우 해당이 된다.

class="foo bar"

 

아이디와 클래스의 조합

#foo.bar {...}이경우는 아이디는 foo 클래스는 bar인 요소이다.

---

속성 선택자

속성 선택자는 태그에 속성을 이용해서 요소를 선택하는데 총 3가지가 있다.

• 단순 속성으로 선택
• 정확한 속성값으로 선택
• 부분 속성값으로 선택

 

단순 속성으로 선택

 

 

HTML에는 세개의 p요소가 있다.

그리고 class라는 속성이 있고 값으로는 "foo, bar, baz"가 있다.

HTML 3번째에는 추가로 id가 title로 되어있다.

마지막으로 CSS를 보면 p요소이면서 class 속성이 있는 텍스트는 빨간색으로

추가로 id가 있는 텍스트는 밑줄을 생성하라는 코드이다.

 

정확한 속성값으로 선택

속성 값으로 요소를 선택하는 것이다.

 

정확한 속성값을 주는 것이다.

HTML에 p라는 요소는 다 있지만 CSS를 보면 class 속성의 값을 "foo" 라고 정확히 적어주었다.

그리고 id도 "title"이라고 정확히 지칭해주면서 값을 선택해 주었다.

이것이 정확한 속성값으로 선택해주는 것이다.

 

부분 속성값으로 선택

부분 속성값은 속성 이름과 속성값 사이에 사용되는 기호에 따라 조금 다르다.

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

0123