앞에 동등한 레벨의 요소가 있는 요소만 선택하기

ooz·2021년 5월 13일
0

스터디

목록 보기
6/18

말로 풀어쓰기 정말 어렵다

<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 선택자를 해석할 때 오른쪽에서 왼쪽으로 읽어 나간다는 것을 봤다. 찾아서 한 번 정리해야지)

profile
사는 것도 디버깅의 연속. feel lucky to be different🌈 나의 작은 깃허브는 https://github.com/lyj-ooz

0개의 댓글