It is more complex way of pointing compliment.
<head>
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
width: 150px;
height: 150px;
background-color: royalblue;
}
div:first-child {
background-color: wheat;
}
div:last-child {
background-color: thistle;
}
</style>
</head>
<body>
<div></div><!--first child-->
<div></div>
<div></div>
<div></div><!--last child-->
</body>
<head>
<style>
body {
height: 1000vh;
margin: 50px;
}
span {
background-color: royalblue;
}
span:nth-child(2n) { 'span: nth-child(2), span: nth-child(4),-','span: nth-child(even)'
background-color: thistle;
}
</style>
</head>
<body>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
<span>Hello!</span>
</body>
you can do like this 'span: nth-child(3n-1)'....
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: pseudo selector 2 (0) | 2021.05.05 |
|---|---|
| KokoaTalk Clone Coding: combinators (0) | 2021.05.04 |
| KokoaTalk Clone Coding: relative, absolute (0) | 2021.05.04 |
| KokoaTalk Clone Coding: fixed (0) | 2021.05.04 |
| KokoaTalk Clone Coding: flex box 3 (0) | 2021.05.03 |
