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번 μ „κΉŒμ§€