[css3] [속성 $=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용

1. 개념

[속성 $=값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용

^는 속성에서 시작하는 문자열을 찾아서 스타일을 적용했다면 $는 ^과는 반대로 끝나는 값이 일치하는 것을 찾아서 스타일을 적용함

2. 태그

[속성 $=값] 선택자

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > 1 [class $="pdf"] { font-size : 20px ; } 2 [class $="hwp"] { font-size : 30px ; } 3 [class $="xls"] { font-size : 40px ; } < /style > < /head > < body > < div > < a href = "#" class = "test-pdf" > pdf에 적용하고 싶은 클래스 < /a > < a href = "#" class = "test-hwp" > hwp에 적용하고 싶은 클래스 < /a > < a href = "#" class = "test-xls" > xls에 적용하고 싶은 클래스 < /a > < /div > < /body > < /html >

결과 화면

[속성 $=값] 선택자 - 사용 예제

코드 설명

[class $="...."]

속성에 지정된 값을 찾을 때 끝에 일치하는 값을 찾아서 스타일을 적용하고자 할 경우에는 $를 사용해 주시면 됩니다.
^표시는 앞에서 일치하는 문자를 찾아서 스타일을 적용했다면 , $는 뒤에서 일치하는 문자열을 찾아서 스타일을 적용합니다.
이러한 케이스가 있느냐? 라고 생각해 본다고 하면 예를 들어서 파일 같은 경우에는 확장자에 따라서 스타일을 다르게 적용하는 것입니다.

예를 들어서 한글의 파일이 있는 경우에는 확장자가 .hwp로 끝나니깐 여기에 해당하는 것만 스타일을 적용하고자 할 경우와 엑셀의 경우에는 .xls , PDF의 경우에는 .pdf 로 해서 각각 파일 확장자에 따라 다른 스타일을 적용하고자 할 경우에 $를 사용하게 됩니다.
이러한 파일 확장자 말고도 끝에서 일치하는 문자를 찾아서 스타일을 적용하고자 할 경우에도 $를 찾아서 자신이 정한 스타일을 적용해 주시면 됩니다.

위에 있는 예제에서는 파일 확장자명을 예로 들어서 사용해 보았습니다.
pdf일 경우에는 폰트 크기를 20px로 , hwp일 경우에는 30px , xls의 경우에는 40px로 적용하라고 해서 속성 값의 끝에서부터 일치하는 값을 찾아서 스타일을 적용한 것입니다.