first-of-type와 first-child의 차이

서론

현재 포트폴리오 사이트 작업까지 끝내고.. 이력서 넣으면서 추가적으로 레이아웃 연습이나 좀 하려고 냅다 삼성전자 사이트에 들어가서 레이아웃을 잡고 있었다.
앞에는 다 잡았고 이제 footer만 잡으면 됐는데

문제가 발생!

삼성전자 홈페이지에 들어가면 푸터가 요렇게 생겼는데

대충 빨간색으로 감싼 영역에 border top bottom주고,
보라색영역엔 전체적으로 border-left를 주고, 첫번째 요소만 border-right를 줘서 표현을 하려고 했다.

수정 전 HTML & CSS

   <div class="footer-nav">
        <div class="inner">
            <h2 class="hide">하단메뉴</h2>
            <div class="content-item">
                <h3>제품</h3>
                <ul>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                </ul>
            </div>
           <!-- 생략 -->
            <div class="content-item">
                <h3>제품</h3>
                <ul>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                    <li>하단메뉴</li>
                </ul>
            </div>
        </div>
    </div>

대충 html 마크업은 .inner안에 .content-item이 들어있게 해주었고, 숨김제목으로 h2.hide를 하나 만들어주었다(이게 문제가 된거지)

.footer-nav{
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
}

.footer-nav .inner {
    display: flex;
    width: 90%;
    margin: 0 auto;
}

.footer-nav .content-item {
    flex-grow: 1;
    border-right: 1px solid #c4c4c4;
}

.footer-nav .content-item:nth-child(1) {
    border-left: 1px solid #c4c4c4;
}

css는 위와 같이 간단하게 줬는데 nth-child(1)이 안먹는것이다!! first-child로도 바꿔도 안먹더라..

수정전 결과물

맨첫번째 요소 왼쪽에도 border가 들어가야하는데.. 왜 안되는건지 몰랐는데
내가 여태껏 nth-child랑 first-child를 쓸때 ul > li 요소에서만 써서 진짜 기초적인걸 간과하고 만것이다..

본론

본론으로 들어가자면 .footer-nav에 .content-item은 첫번째 요소가 아니다.
h2.hide이친구가 첫번째 요소고, .content-item은 두번째 부터 시작하는것이다.!

여기서 알아야할 css지식!

first-child와 first-of-type의 차이

first-child 는 자식요소중 제일 첫번째 자식을 선택하는 가상선택자이고,
first-of-type은 해당하는 타입의 첫번째 요소를 선택하는 가상선택자이다.

첫번째를 선택한다는것에선 같을 수 있지만 약간은 다르다는점!

위에서 내가 작성한 코드를 예시로 들면, first-child는 h2이고, div중에 첫번째를 잡고 싶은거면 first-of-type을 선택해야 한다!

수정후 css

.footer-nav .content-item:first-of-type {
 	/* div 요소(타입)중 첫번째 요소를 선택한다. */
    border-left: 1px solid #c4c4c4;
}

느낀점

평상시에는 ul > li로 만 작성해서 li의 nth-child나 first-child이런식으로 선택했기 때문에 first-of-type을 써본적이 없었기에 생긴 문제였다.
아직도 배워야할게 많다는걸 느끼는 하루였당 :D
지금이라도 알았으니 다행인건가(?)