22.04.06_css 문제풀이 과제

아래 문제를 풀어보세요.

<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

CSS 셀렉터 정리- CSS3 Selector

https://www.w3schools.com/cssref/sel_element_pluss.asp

CSS element+element Selector