본문 바로가기
CSS

속성 선택자

by Mia_ 2022. 10. 27.

a. 속성 선택자 

 : 태그 안에서 사용하는 속성값에 따라 요소를 선택하는 것. 

 

1. [속성] 선택자

 : HTML 태그를 작성할 사용한 속성값에 따라 원하는 요소 선택

 

2. [속성="속성값"] 선택자

 : 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 지정

/*<a target="_blank">*인 요소 지정/
a [target="_blank"] { ... }

 

3. [속성 ~= "속성값"] 선택자

 : 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택

  - 속성이 하나면서 속성값이 여러 개일 때 특정 속성을 찾는데 용이

 

4. [속성 |= "속성값"] 선택자

 : 특정 속성값이 포함된 속성에 스타일 적용

  - 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택

  - [속성 ~= "속성값"]  선택자는 하이픈으로 연결한 단어에는 스타일 적용 안됨! 해당 부분이 큰 차이점

 

5. [속성 ^= "속성값"] 선택자

 : 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려할 경우 사용

 

6.  [속성 $= "속성값"] 선택자

 : 지정한 속성값으로 끝나는 요소를 선택

'CSS' 카테고리의 다른 글

미디어 쿼리  (0) 2023.01.16
가상 클래스와 가상 요소  (0) 2022.10.27
연결 선택자  (0) 2022.10.27
반응형 웹  (0) 2022.10.27
CSS 박스 모델  (0) 2022.10.26