Snippet/CSS ์Šค๋‹ˆํŽซ

๐Ÿš€ ์†์„ฑ ์„ ํƒ์ž not equal ๊ตฌํ˜„ํ•˜๊ธฐ [attr!=value]

์ธํŒŒ_ 2023. 2. 25. 10:24

Attribute Selector not equal

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='#'])");