CSS๐Ÿ”ง/css

์„ ํƒ์ž nth-child ํ™œ์šฉ

hyojinny 2023. 11. 3. 21:51

๊ธฐ๋ณธ

์„ ํƒ์ž:nth-child(n) // n๋ฒˆ

์„ ํƒ์ž:nth-last-child(n) //๋’ค์—์„œ n๋ฒˆ์งธ 

์„ ํƒ์ž:nth-child(2n) // 2์˜๋ฐฐ์ˆ˜๋ฒˆ์งธ 2,4,6,8.......๋ฒˆ์งธ๋“ค ๋ชจ๋‘ 

์„ ํƒ์ž:nth-child(odd) //ํ™€์ˆ˜๋ฒˆ์งธ ๋ชจ๋‘ ์„ ํƒ

์„ ํƒ์ž:nth-child(even) //์ง์ˆ˜๋ฒˆ์งธ ๋ชจ๋‘ ์„ ํƒ

 

๋ฒ”์œ„

 

์„ ํƒ์ž:nth-child(-n+6) //1๋ฒˆ๋ถ€ํ„ฐ 6๋ฒˆ๊นŒ์ง€

์„ ํƒ์ž:nth-last-child(-n+6) //๋’ค์—์„œ 1๋ฒˆ๋ถ€ํ„ฐ 6๋ฒˆ๊นŒ์ง€

์„ ํƒ์ž:nth-child(n+6) //6๋ฒˆ๋ถ€ํ„ฐ ์ „๋ถ€

์„ ํƒ์ž:nth-last-child(-n+6) //๋’ค์—์„œ 6๋ฒˆ์จฐ ์ „๊นŒ์ง€ ์ „๋ถ€ (10๊ฐœ๋ผ๋ฉด 5๊ฐœ)

์„ ํƒ์ž:nth-child(n+2):nth-child(-n+4) //2๋ฒˆ ๋ถ€ํ„ฐ 4๋ฒˆ ์ „๊นŒ์ง€