어제 오늘 내일

CSS의 선택자 중 자식 요소(부모 요소 바로 하위의 요소), 자손 요소(부모 요소 하위의 요소, 바로 하위가 아니어도 된다)를 선택하는 방법을 알아보도록 하겠습니다. 자식 요소 선택하기 ( '>' ) 부모 요소 바로 하위의 자식 요소를 선택하기 위한 결합자로 '자식 결합자(Child Combinator)'라고 합니다. 부모선택자 > 자식선택자 위와 같은 형식으로 사용하며, 부모 요소 바로 하위의 자식 요소를 선택합니다. 자식요소1 자식요소2 자손 div > h5 { background-color: yellow; } div > h5 div 요소 바로 하위의 h5 요소만 선택합니다. 자손 요소 선택하기 ( ' ' ) 보통 한 칸의 공백 문자로 표현하는 '자손 결합자(Descendant Combinator)..

:last-child CSS의 :last-child 선택자를 이용하여 형제 요소중 마지막 요소를 선택할 수 있습니다. 첫번째 두번째 마지막 .my { background-color: yellow; } .my:last-child { background-color: skyblue; } 위 예제는 'my' 라는 클래스명을 가지는 3개의 형제 div 요소가 있습니다. 이 3개의 형제 요소 중, 마지막 div 요소를 선택하는 예제입니다. 'my'라는 클래스를 가지는 div 영역은 배경색이 모두 노란색입니다. 이중, 마지막 div 영역만 하늘색으로 표시하기 위해서, .my:last-child 선택자를 사용하여, 배경색을 하늘색으로 지정하였습니다.