마진탑

헷갈리는 CSS Combinators - 형제선택자 편

매번 헷갈리지만 그냥저냥 넘어갔던 선택자들을 정리하려 한다. 실무적인 측면에서도 이런 선택자들을 활용해 CSS적인 문제를 해결해줄 수 있는 팁들이 많으니 꼭 알아두도록 하자. 예제 핵심: div를 제외한 h1, h2, h3, h4 그리고 ul은 모두 형제요소이다. 나는야 h1 짬뽕 탕수육 피자 나는야 h2 사과 딸기 배 나는야 h3 광주 서울 부산 나는야 h4 자전거 버스 지하철 형제 선택자, 무슨말이야? 아래 선택자는 뭘 선택하고 있을까? h1 + ul { background-color: yellow; } = 너가 ul인데, 너 바로 앞 형제가 h1야? 라는 의미다. (ul이면서, 바로 앞에 형제요소로 h1을 가지고 있는) 바로 앞 형제요소인 h1을 가지고있는 ul이 선택된 것을 볼 수 있다. 밑에서는..