[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

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > 1 [class !="test"] { background : #000 ; color : yellow ; padding : 5px ; border-radius : 10px ; } 2 [class ~="test"] { font-size : 20px ; } < /style > < /head > < body > < div > < a href = "#" class = "test" > 첫번째 test 클래스 < /a > < a href = "#" class = "test-two" > 두번째 test가 하이픈으로 연결된 클래스 속성 < /a > < a href = "#" class = "three" > 세번째로 test가 없는 클래스 < /a > < /div > < /body > < /html >

결과 화면

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

코드 설명

1

[class |="test"]

속성 값을 |로 지정했을 때는 test라는 단어가 포함되어 있을 경우에는 스타일을 지정합니다.
여기서 만약에 ~를 사용하게 되면 test-two라는 클래스에는 스타일이 적용되지 않습니다.
하이픈이 포함되어 있는 경우에는 test를 하나의 단어로 인식하지 못하기 때문에 특정한 문자를 포함한 경우에도 순수하게 한 단어로 적혀 있어야 합니다.
그런데 여기서 | 속성을 사용하게 되면 하이폰이 포함되어 있는 경우라도 스타일을 적용하게 됩니다.
위에서 보시는 것처럼 test와 test-two는 모두 1에 해당하는 스타일이 적용된 것을 확인하실 수 있습니다.

2

[class ~="test"]

그리고 |과 ~의 차이점을 보기 위해서 2번째 스타일을 담았습니다.
class~= test 라고 해서 test가 포함되어 있는 경우 font-size를 20으로 하라고 스타일을 지정하였습니다.
이러한 경우에 위에서 보시는 것처럼 첫번째 a 태그만 글자 크기가 커지는 것을 확인하실 수가 있습니다.
하이픈이 포함된 두번째 a 태그는 스타일이 적용되지 않았고 순순하게 test 한 단어로 된 경우에만 적용되었습니다.
이 차이점을 확인하시고 사용하시면 됩니다.