:visited

:visited는 기존 a태그를 클릭하면 생기는 보라색 링크의 색상을 바꿔주는 역할입니다.
visit가 말 그대로 방문을 뜻하는 의미입니다.

#nav-left a:visited {
	color:black;
}

이렇게 색상을 바꿔주면 링크를 눌러도 색상 변동이 없습니다.

:focus-within

:focus-within은 마우스로 클릭했을 때 생기는 focus로 효과를 줄 때 쓰는 css입니다.

#header-search form:focus-within {
	box-shadow:0 4px 9px 0 rgba(0, 0, 0, 0.05);
}

저는 :focus-within으로 box-shadow를 적용했습니다.

:nth-of-type

:nth-of-type은 같은 타입의 선택자를 뜻합니다.
li가 4개 있고 중간에 span이 있다 치면

<div>
	<ul>
    	<li class="num1"></li>
		<li class="num2"></li>
		<span class="num3"></span>
		<li class="num4"></li>
    </ul>
</div>

nth-of-type으로 4번째를 선택하고 싶다면
li:nth-of-type(3)이 됩니다.

4번째가 아닌가? 싶겠지만 같은 타입의 선택자를 뜻하기 때문에
li만 볼 때 3번째여서 nth-of-type(3)으로 선택합니다.

:nth-child

:nth-child는 하위 태그들을 뜻합니다.
위와 같이 li가 4개 있고 span이 있다 치면

<div>
	<ul>
    	<li class="num1"></li>
		<li class="num2"></li>
		<span class="num3"></span>
		<li class="num4"></li>
    </ul>
</div>

nth-child(4)를 선택하면 num4 클래스가 선택이 됩니다.
말 그대로 ul 태그 안의 4가지 중 4번째를 선택합니다.