CSS) 선택자

전체 선택자

• 모든 요소를 선택

하위 선택자

• div 태그의 하위 요소 중 class 속성의 값이 orange인 요소 선택

div .orange {
	color: orange;
}

 

자식 선택자

• ul 태그의 자식 요소 중 class 속성의 값이 orange인 요소 선택

ul > .orange {
	color: orange;
}

 

인접 형제 선택자

• h1 태그의 다음 형제 중 ul 태그 하나를 선택

h1 + ul {
	color: orange;
}

 

일반 형제 선택자

• h1 태그의 다음 형제 중 ul 태그 모두를 선택

h1 ~ ul {
	color: orange;
}

 

가상선택자

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 지정해줄 수 있다.

            /* h1태그를 클릭했을 때 */
        h1:active {
            color: orange;
        }
        
        /* h1태그에 마우스 커서를 올렸을 때 */
        h1:hover {
            color: orange;
        }
        
        /* input태그가 선택되었을 때 */
        input:focus {
            color: orange;
        }
        
        /* 방문 후 링크 */
        a:focus {
            color: orange;
        }

        /* class 속성의 값이 first인 요소의 첫번째 span 자식 요소 */
        .first span:first-child {
            color: orange;
        }
        
        /* class 속성의 값이 first인 요소의 마지막 span 자식 요소 */
        .first span:last-child {
            color: orange;
        }
        
        /* class 속성의 값이 second인 요소의 2번째 자식 요소 */
        .second *:nth-child(2) {
            color: orange;
        }

        /* class 속성의 값이 second인 요소의 자식 요소 중 span 태그가 아닌 요소 */
        .second *:not(span) {
            color: orange;
        }

>>결과