Snippet/CSS ์ค๋ํซ
๐ ์์ฑ ์ ํ์ not equal ๊ตฌํํ๊ธฐ [attr!=value]
์ธํ_
2023. 2. 25. 10:24
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='#'])");