tr > th:first-child ~ th {
background-color: yellow;
height: 50px;
}
-----------------------------------------------------------------------------------------------------
<tr>
<th width="30%" rowspan="3">여름맞이 바겐세일</th>
<!-- rowspan 은 행병합인데 rowspan="3"은 3개행을 하나로 병합한다.
조심할 것은 밑에 <tr>태그가 바로 나와야 한다. -->
<th width="30%">제품이름과 설명</th>
<th width="20%">개당 가격</th>
<th>박스당 개수</th>
<!-- <th width="20%">박스당 개수</th> --> <!-- 마지막 열은 width="20%" 을 생략해도 된다. -->
</tr>
tr > th:first-child 은 "여름 맞이 바겐세일" 의 th 태그인데, tr > th:first-child ~ : "여름 맞이 바겐세일" 의 th 태그 다음에 오는(자신 제외) 모든 형제태그(형제엘리먼트, 형제노드)를 말한다. 해당코드에서는 tr > th 태그 밖에 존재하지 않는다. 따라서 yellow 컬러로 표시된 셀이 없다.
예시) tr > th:first-child ~
tr > th:first-child ~ th : "여름 맞이 바겐세일" 의th 태그 다음에 오는(자신 제외) 모든형제태그(형제엘리먼트, 형제노드) 중에 th 태그만을 가리키는 선택자(selector)이다.
예시) tr > th:first-child ~ th
tr:last-child > td:first-child > span:first-child + span { /* tr:last-child > td:first-child > span:first-child 를 제외한 다음에 오는 모든 형제태그 중에서도 자신 바로 밑에 오는 span 태그를 가리킨다. */
color: red;
}
-----------------------------------------------------------------------------------------------------
<tr>
<td colspan="2" class="mycenter">
<span>총액</span>
<span>및</span>
<span>총박스</span>
<span>개수</span>
</td>
<!-- colspan 은 열병합인데 colspan="2" 은 2개열을 하나로 병합한다. -->
<td class="myright">24,000원</td>
<td class="mycenter">450</td>
</tr>
tr:last-child > td:first-child > span:first-child 은 바로 <span>총액</span> 을 가리키는 선택자(selector)인데, tr:last-child > td:first-child > span:first-child + span :<span>총액</span> 엘리먼트의 바로 밑 형제태그인 span 엘리먼트를 말한다. (바로 밑 동생의 엘리먼트를 말한다.)
