HTML & CSS ๐/CSS ์ฐ์ต
1์ผ์ฐจ nth-child ๊ตฌ์กฐ ์ ํ์
Maryland_09
2020. 10. 26. 21:50
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>
๊ฒฐ๊ณผ๋ฌผ
