🚀 속성 선택자 not equal 구현하기 [attr!=value]

Attribute Selector not equal 구현

CSS 속성(Attribute) 선택자 문법에는 equal 연산자와 함께 다양한 기호 문법을 지원한다.

• [attr=value] : attr 속성이 정확히 value인 요소를 선택
• [attr~=value] : attr 속성이 정확히 value인 요소를 선택
• [attr|=value] : attr 속성을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택
• [attr^=value] : attr 속성을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택
• [attr$=value] : attr 속성을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택
• [attr*=value] : attr 속성을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택

그런데 희안하게 있을 법한 [attr!=value] not equal 기호를 지원하지 않는다. 따라서 기존의 :not 선택자와 속성 선택자를 조합하여 사용하여야 한다.

다음은 anchor 태그중 href 속성 값이 '#' 이 아닌 링크 요소들을 가져오는 예제 이다.

a:not([href='#']) {
	...
}

document.querySelectorAll("a:not([href='#'])");