<body>
<ul>
<span>span</span>
<li>li 청소</li>
<li>li 빨래</li>
<li>li 공부</li>
<div>div</div>
<span>span</span>
</ul>
<ul>
<span>span</span>
<li>li 청소</li>
<li>li 빨래</li>
<li>li 공부</li>
<div>div</div>
<span>span</span>
</ul>
</body>
/* span 형제 요소 그룹 중 첫 번째 요소가 span 이면, background: red 적용 */
span:first-child{
background: red;
}
/* span 형제 요소 그룹 중 3번째 요소가 span이면 background: teal 적용,
span 형제 요소 그룹 중 3번째 요소가 span이 아니어서
스타일 적용이 되지 않은 것을 확인할 수 있음
*/
span:nth-child(3){
background: teal;
}
/* span 형제 요소 그룹 중 마지막 요소가 span 이면, background: teal 적용 */
span:last-child{
background: orange;
}
/* li의 부모 요소의 자식 중
n번째 li에
background: yellow 적용 */
li:nth-of-type(3){
color: blue;
}
/* div의 형제 요소 그룹 중에서 div가 하나인 경우 */
div:only-of-type{
border: 5px solid purple;
}
/* li의 형제 요소 그룹 중 첫번째 요소가 아닌 li에
스타일 적용,
li의 형제 요소 그룹 중에 첫번째 요소는 span이므로
모든 li에 스타일이 적용됨
*/
li:not(:first-child){
text-decoration: line-through;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.