CSS_CSS선택자연습문제

분석하기
1. 틀 나누기 (table 태그)
2. 선택자로 수열 선택해서 색칠하기

html code

<h1>형태 구조 선택자/일반 구조 선택자 이용하기</h1>

<table>
	<tr> <!--1행-->
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr> <!--2행-->
		<td></td>
        <td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr> <!--3행-->
		<td class="red"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr> <!--4행-->
		<td class="red"></td>
		<td class="green"></td>
		<td class="green"></td>
		<td></td>
		<td></td>
	</tr>
	<tr> <!--5행-->
		<td class="red"></td>
		<td class="red"></td>
		<td class="green"></td>
		<td class="green"></td>
		<td></td>
	</tr>
</table>

css code

table {
    border: 1px solid black;
    width: 500px;
    height: 500px;
}

tr > td.red:nth-child(1) {
    background-color: red;
}

tr > td.red:nth-child(2) {
    background-color: red;
}

tr > td.green:nth-child(2) {
    background-color: green;
}

tr > td.green:nth-child(3) {
    background-color: green;
}

tr > td.green:nth-child(4) {
    background-color: green;
}