아래 문제를 풀어보세요.
<ul>
<li>Apple</li>
<li class="a">Mango</li>
<li class="a">Banana</li>
<li>Melon</li>
<li>Strawberry</li>
</ul>
위의 마크업에서
.a + li { background:red;}
li + li + li { font-size:30px;}
어떤 li가 빨간배경? 어떤 li가 글자크기가 변경될까요? 그 이유는요?
정답
빨간배경:
<li class="a">Banana</li>
<li>Melon</li>
이유: +는 인접 형제 셀렉터이다. 따라서 .a 요소의 바로 다음에 위치한 형제 요소인 부분에 스타일을 적용해준다. 따라서 a클래스인 망고와 바나나의 다음 li요소인 바나나 멜론이 각각 스타일의 적용을 받는다.
글자크기 변경:
<li class="a">Banana</li>
<li>Melon</li>
<li>Strawberry</li>
이유: 위와 같은 이유로, li의 다음 형제 요소인 li의 또 다음 형제 요소는 스타일의 적용을 받는다. 따라서 첫번째 애플 li의 다음, 또 그 다음 요소인 바나나, 두번째 망고 li의 다음, 또 그 다음 요소인 멜론, 세번째 바나나의 다음 또 그 다음 요소인 스크로베리까지 총 3번 스타일 적용을 받게 된다.
알아야 할 개념
복합 셀렉터 (Combinator)
1. 후손 셀렉터 (Descendant Combinator)
- 셀렉터A 셀렉터B
<style>
/* div 요소의 후손요소 중 p 요소 */
div p { color: red; }
</style>
2. 자식 셀렉터 (Child Combinator)
- 셀렉터A > 셀렉터B
<style>
/* div 요소의 자식요소 중 p 요소 */
div > p { color: red; }
</style>
3. 형제(동위) 셀렉터 (Sibling Combinator)
3.1 인접 형제 셀렉터(Adjacent Sibling Combinator)
- 셀렉터A + 셀렉터B ( ~ 의 차이 한 묶음의 ul만 지정)
<style>
/* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
p + ul { color: red; }
</style>
3.2 일반 형제 셀렉터(General Sibling Combinator)
- 셀렉터A ~ 셀렉터B
<style>
/* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/
p ~ ul { color: red; }
</style>
참고.
https://calmseong.tistory.com/18
https://www.w3schools.com/cssref/sel_element_pluss.asp
'멋쟁이사자처럼FE 2기 > 일일과제' 카테고리의 다른 글
22.04.07_<천하제일 캐릭터 경진대회>_초안 (6) | 2022.04.07 |
---|---|
22.04.07_overflow : hidden vs display:none 차이 (0) | 2022.04.07 |
22.04.05_문제풀이 과제 (0) | 2022.04.05 |
22.04.05_달력 만들기 (3) | 2022.04.05 |
GIt과 GIthub란? (3) | 2022.03.31 |