1์ผ์ฐจ nth-child ๊ตฌ์กฐ ์ ํ์
2020. 10. 26. 21:50ใHTML & CSS ๐/CSS ์ฐ์ต
nth-child(2n+1) : ํ์๋ง ์ ํ
nth-child(2n) : ์ง์๋ง ์ ํ
first-child: ์ฒซ ๋ฒ์งธ๋ง ์ ํ
last-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 |