[오늘의 이슈] Child combinator와 Descendant combinator

2차 프로젝트를 진행하면서 피드백을 받은 부분이 있어 살펴보고자 한다. 사실 이 부분에서 이야기를 들었을 때 한 번도 생각해본 적인 없는 부분이었다. 사실 용어부터가.... 자손 결합자, 자식 결합자라서 자식결합자는 알겠는데 자손 결합자가 뭐지 했다. 

 

1) 자식 결합자

span {
  background-color: white;
}

div > span {
  background-color: DodgerBlue;
}

난 뭐 거의 이렇게 썼던 것 같다. 

 

2) 자손 결합자

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

꺽쇠를 안쓰면 하위 요소가 다 선택된다. 프로젝트에서 하위 요소가 어차피 하나 밖에 없어서 팀원 분이 그냥 자손으로 처리한 부분이 있었는데 피드백이 들어왔다. 모두가 함께 보고 쓰는 코드이다보니 되도록 정확하게 쓰는 것이 좋다고 느껴졌다.