/* 선택자 요소에 마우스 커서가 올라가 있는 동안 선택 */
box:hover {

}

/* 선택자 요소에 마우스를 클릭하고 있는 동안 선택 */
a:active {

}

/* 선택자 요소가 포커스 되면 선택. focus 되는 요소는 정해져있다. */
/* HTML 대화형 콘텐츠가 해당된다. INPUT, A, BUTTON, LABEL, SELECT */
/* 또는 tabindex 속성을 사용한 요소도 focus 될 수 있다. */
input:focus {

}

/* html 이다. 이제 해당 박스도 포커스가 된다. */
<div class="box" tabindex="-1"></div>

.fruits span:first-child {
	/* 형제요소중 첫째라면 선택 */
}

.fruits h2:last-child {
	/* 형제요소중 막내라면 선택 */
}

.fuits *:nth-child(n) { /* n 또는 2n, 2n+1, n+2 같이도 가능하다. */
	/* 형제 요소중 n 째라면 선택 */
}

.fruits *:not(span) {
	/* span 태그가 아닌 모든 요소 */
}