📌 CSS 속성 선택자 정리!

특정한 속성을 사용한 요소에 스타일을 적용

태그[속성]

• 특정한 속성을 사용한 요소에 스타일을 적용

 

특정 값을 갖는 속성에 스타일 적용

[속성=값]

• 정확한 값만을 허용

 

여러 값 중 특정 값이 "포함"된 속성에 스타일 적용

[속성~=값]

• 띄어쓰기로 구분된 특정 단어가 있는 경우

 

예) [class~="button"] 의 경우에는

• "flat button" 은 선택됨
• "flat-button" 이나 "buttons" 는 포함 안 됨

 

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

[속성 |=값]

• 하이픈 포함 단어별. 띄어쓰기나 하이픈으로 나뉜 단어를 체크.
• 🐍 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용

 

예) [class|="button"] 의 경우에는

• "flat button" "flat-button" 둘 다 선택됨
• "buttons"는 선택 안 됨

 

특정 값으로 시작하는 속성에 스타일 적용하기

[속성^=값] 

• 값 글자로 시작해야함.
• 🐍 링크 선택할 수 있음 (a[href^="http"] 또는 a[href^=#])

 

특정 값으로 끝나는 속성에 스타일 적용

[속성$=값]

• 값 글자로 끝나야함.
• 🐍 확장자 따질때 편할 듯 (a[href$=.xls]) 혹은 링크 종류 (a[href$=.com])

 

값의 일부가 일치하는 속성에 스타일 적용

[속성*=값]

|랑 비슷해보이나 일부만 안에 있어도 적용

 

예) [class|="butt"] 라고만 해둬도

 "flat button" "flat-button" 둘 다 선택됨

 

🐍 대소문자 관련

• [속성=값 i] : 끝에 i또는 I를 붙이면 값의 대소문자를 구분하지 않음
• [속성=값 s] : 끝에 s또는 S를 붙이면 값의 대소문자를 구분함.