[짧게 정리하는 CSS] 자식결합자 이해하기

자식 결합자 ( > )

첫 번째 요소의 바로 아래 자식인 노드를 선택한다.

 

오류가 났던 부분

두 개의 테이블이 있다고 가정할 때, 각각 id를 table1, table2로 주었다.

그때 위의 이미지처럼 table 2 tr, td에게만 border값을 주고 싶은 경우가 있었다.

 

[성공한 경우]

.table2 > tr,
.table2 td{
	border: 1px solid darkgray;
}

- .table > tr, . table 2 > tr > td로 해줘도 됐을 것이다.

 

[실패한 경우]

.table2 > tr, td{
	border: 1px solid darkgray;
}

- 코드 상 td는 tr로 감싸져 있기 때문에 한번 더 >를 써줘야 했다.

- 실패한 경우의 코드는 table1의 td까지도 border값이 들어간다.