1์ผ์ฐจ nth-child ๊ตฌ์กฐ ์„ ํƒ์ž

2020. 10. 26. 21:50ใ†HTML & CSS ๐Ÿ’™/CSS ์—ฐ์Šต

 

 

 

 

 

 

 

 

 

nth-child(2n+1) : ํ™€์ˆ˜๋งŒ ์„ ํƒ
nth-child(2n) : ์ง์ˆ˜๋งŒ ์„ ํƒ
first-child: ์ฒซ ๋ฒˆ์งธ๋งŒ ์„ ํƒ
last-child : ๋งˆ์ง€๋ง‰๋งŒ ์„ ํƒ 

ul li:nth-child {}

 

์ด ์ฝ”๋”ฉ์„ ํ•  ๋•Œ ๋„์–ด์“ฐ๊ธฐ ์ž˜๋ชปํ•˜๊ฑฐ๋‚˜ ์ŠคํŽ ๋ง์ด ํ‹€๋ฆฌ๋ฉด ๊ฒฐ๊ณผ๊ฐ’์ด ์ž˜ ์•ˆ ๋‚˜์˜ค๋ฏ€๋กœ ์ฃผ์˜ํ•œ๋‹ค. 

์•„๋ฌด๋•Œ๋‚˜ ๋„์–ด์“ฐ๊ธฐ๋ฅผ ํ•˜๋ฉด ์•ˆ ๋˜๋Š” ์  ์ฃผ์˜! 

 

 

<html>
  <head>
    <style>
    
    * {margin: 10; padding:0; text-align:center;}

    div { width:150px; }

    ul li:nth-child(2n+1) {background-color: orange;}
    
    ul li:nth-child(2n) {background-color: yellow;}

    ul li:first-child { border-radius:10px 10px 0 0;}
   
    ul li:last-child { border-radius:0 0 10px 10px;}

    </style>
  </head>
  <body>
    <div>
      <ul>
        <li>English</li>
        <li>Korean</li>
        <li>Chinese</li>
        <li>French</li>
        <li>Spanish</li>
        <li>Japanese</li>
        <li>Irish</li>
      </ul>
    </div>

  </body>
</html>

 

 

๊ฒฐ๊ณผ๋ฌผ

 

 

 

 

 

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'HTML & CSS ๐Ÿ’™ > CSS ์—ฐ์Šต' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

1์ผ์ฐจ nth-child ๊ตฌ์กฐ ์„ ํƒ์ž  (0) 2020.10.26
1์ผ์ฐจ margin ๊ฐ€์šด๋ฐ์ •๋ ฌ  (0) 2020.10.26
1์ผ์ฐจ CSS ๊ธฐ์ดˆ background, border, font, hover  (0) 2020.10.26

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€ 0

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”