8-2. CSS 속성 선택자

html 태그 작성할 때 속성도 많이 사용하는데 그 속성값에 따라 원하는 요소를 선택할 수도 있다.

 

1. [속성] 선택자 (해당 속성이 있는 경우)

대괄호 사이에 원하는 속성을 입력하면 된다.

 

2. [속성 = 속성값] 선택자 ( 지정한 속성값이 있는 경우) 

특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정하는데 사용한다. 

html에만 적용된걸 확인할 수 있다.

 

 

3. [속성 ~= 속성값] 선택자 (지정한 속성값이 포함된 요소-단어별)

[속성 ~= 속성값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다. 

특정 속성값을 찾는데 편하다. 

button 이라는 속성값이 있는 요소만 바뀜

[속성 ~= 속성값] 선택자는 button값과 정확하게 일치하는 요소를 선택한다. 

 

 

4.  [속성 |= 속성값] 선택자 (지정한 속성값이 포함된 요소 - 하이픈과 단어별)

[속성 |= 속성값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용한다. 

[속성 |= 속성값] 선택자는 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택한다. -> 이것이 [속성 ~= 속성값]과는 다른 점이다. 

ja에는 적용 안됨

 

5. [ 속성 ^= 속성값] (지정한 속성값으로 시작하는 요소)

[속성 ^= 속성값]은 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 이 선택자를 사용한다. 

 

6. [속성 $= 속성값] (지정한 속성값으로 끝나는 요소)

[속성 $= 속성값] 선택자는 지정한 속성값으로 끝나는 요소를 선택한다. 

[href $= xls] 처럼 파일 이름의 마지막 속성값을 체크한 후 파일 형식 에 맞는 아이콘을 파일 이름 옆에 표시한다.

7. [속성 *= 속성값] (지정한 속성값의 일부가 일치하는 요소)

[속성 *= 속성값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택해야한다.