말로 풀어쓰기 정말 어렵다
<div class="split">
<div>
<p>어쩌구</p>
</div>
<p>pick me!</p>
</div>
<div class="split">
<div>
<p>어쩌구</p>
</div>
<p>pick me!</p>
</div>
이렇게 html이 되어있는 상황에서 pick me!에만 스타일을 주고 싶을 때 선택자를 아래와 같이 적을 수도 있다.
.split > * + * {
margin-left: 2em;
}
모든 요소 중에서, 앞에 같은 레벨의 요소가 있으면서 .split의 직속인 요소를 선택한다. (어디서 봤는데 브라우저가 css 선택자를 해석할 때 오른쪽에서 왼쪽으로 읽어 나간다는 것을 봤다. 찾아서 한 번 정리해야지)