매번 헷갈리지만 그냥저냥 넘어갔던 선택자들을 정리하려 한다.
실무적인 측면에서도 이런 선택자들을 활용해 CSS적인 문제를 해결해줄 수 있는 팁들이 많으니 꼭 알아두도록 하자.
예제
핵심: div를 제외한 h1, h2, h3, h4 그리고 ul은 모두 형제요소이다.
<body>
<div>
<h1>나는야 h1</h1>
<ul>
<li>짬뽕</li>
<li>탕수육</li>
<li>피자</li>
</ul>
<h2>나는야 h2</h2>
<ul>
<li>사과</li>
<li>딸기</li>
<li>배</li>
</ul>
<h3>나는야 h3</h3>
<ul>
<li>광주</li>
<li>서울</li>
<li>부산</li>
</ul>
<h4>나는야 h4</h4>
<ul>
<li>자전거</li>
<li>버스</li>
<li>지하철</li>
</ul>
</div>
</body>
형제 선택자, 무슨말이야?
아래 선택자는 뭘 선택하고 있을까?
h1 + ul {
background-color: yellow;
}= 너가 ul인데, 너 바로 앞 형제가 h1야? 라는 의미다.
(ul이면서, 바로 앞에 형제요소로 h1을 가지고 있는)
바로 앞 형제요소인 h1을 가지고있는 ul이 선택된 것을 볼 수 있다.
밑에서는는 실전처럼 ul에 class를 주었다.
이제 아래 선택자를 통해 백그라운드 색깔을 핑크색으로 바꿔보자!
<h1>나는야 h1</h1>
<ul class="parent">
<li>짬뽕</li>
<li>탕수육</li>
<li>피자</li>
</ul>.parent li + li {
background-color: pink;
}이게 의미하는 바는 뭘까?
= .parent 안에 들어있으면서, 니가 li인데 니 바로앞에 형제가 li이야?
class명으로 parent를 가지고 있는 ul 안에서, 바로 앞 형제 요소로 li를 가지고 있는 li를 선택하는 것이다.
첫번 째 li는 바로 앞 형제요소로 li이가 있나? 없다! h1이 있을 뿐이다.
그렇기 때문에 첫번째 li는 선택되지 않았고, 자기 바로 앞에 형제속성으로 li를 가지고 있는 두 번 째, 세 번 째 li들이 선택된 것을 볼 수 있다.
이제는 div 안에있는 li중 바로 앞 형제선택자로 li를 가지고 있는 요소를 다 선택해보면
div li + li {
background-color: pink;
}
이런 결과를 볼 수 있다. 모든 div 안에서 li를 바로 앞 형제요소로 가지고있는 li들을 선택했으니까@
실무에서 사용할 수 있는 꿀팁 (중요)
보통 이런 상황에서 박스 1부터 5까지 일정한 간격을 주고싶을 때,
우리는 보통
- 각각의 요소를 공통적으로 선택해 margin:bottom을 주는데
- 가장 마지막에 위치한 요소는 그 아래 이미 위치한 패딩이나 다른 공간과 합쳐져버리기 때문에 빈 공간이 상대적으로 커져버려서
- 이를 해결하기 위해 부모요소에 nth:child속성을 넣어 마지막 요소만 따로 선택하고 margin-bottom: none 값을 적용해줬다.
하지만 여기서 형제선택자를 적용하면 아주 깔끔하게 간격을 줄 수 있다.
그냥 자기 앞에 형제선택자로 li를 가지고 있는 li를 선택해서 margin-top을 주면 되는것이다.
(현재 예제에서는 li를 사용했지만 block level 요소라면 뭐든지 상관없다)
첫번째에 위치한 li는 바로 앞에 형제선택자로 또다론 li가 없기 때문에 (자신이 맨 첫번째이기 때문에) 선택이 되지 않고, 그 뒤에 따라오는 li들만 선택되어 margin-top이 먹혔다.
li + li {
margin-top: 20px;
}
아주 깔끔하다!
'Front-End Developer > CSS' 카테고리의 다른 글
| 가지고 놀면서 배우는 position: absolute; (3) | 2022.04.25 |
|---|---|
| Sass 연습 - @function 와 @return (0) | 2022.04.25 |
| background-image에 no-repeat이 안되요 - 초심자의 깜찍한 실수 (0) | 2022.04.19 |
| 항상 헷갈리는 text-align, 딱 두 가지만 기억하자 (4) | 2022.04.19 |
| 알아두면 너무 유용한 네거티브 마진 (4) | 2022.04.18 |