<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.