[의문점] CSS Diner level 18 직접 코드 만들어서 해결하기

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요

 

CSS Diner 사이트를 통해 Selectors 연습을 하고 있다

그 중 level 18 에서 이해가 가지 않는 부분들이 있어서 좀 더 파고들어 보려고 한다

 

:nth-child 자식 요소 선택을 사용하여 해결하면 되는 일이다 

 

위 예시를 참고하여 응용해보았다

 

div plate:nth-child(3)

응? 안 되네?

(div가 여러개 있는 것이 아니라 하나만 있어서 div를 선택해보았다)

.table plate:nth-child(3) 

얘도 안 되네?... 

 

:nth-child(3)

이 코드로만 된다 

 

그런데 위 예시를 보면 EVERY element 를 대상으로 하는 것 같은데 

만약 div가 여러개 있다면 `:nth-child`를 사용해 어떻게 구분하여 선택할 수 있는지 궁금해졌다 

비슷한 예시를 만들어서 한 번 테스트해보려고 한다 

 

 

<직접 만든 예시>

<div class="box">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p id="color">d</p>
</div>

<div class="box2">
    <p>a</p>
    <p>b</p>
    <p>c</p>
    <p id="color2">d</p>
</div>

이렇게 같은 구조의 div를 만들어보았다 

만약 문제가 첫 번째 c에만 배경색을 채워보세요 라면 어떻게 될까 

 

 

:nth-child(3) {
    background-color: pink;
}

p:nth-child(3) {
    background-color: pink;
}

div p:nth-child(3) {
    background-color: pink;
}

p:nth-of-type(3) {
    background-color: pink;
}

위 코드들로는 첫 번째 div의 3번째 항목과 두 번째 div의 3번째 항목 둘 다 선택이 된다

 

 

.box p:nth-child(3) {
    background-color: pink;
}

이렇게 코드를 작성했을 때 첫 번째 c가 선택이 된다

 

 

개념으로 따진다면 CSS Diner game - Level 18 에서 

앞전에 작성했던 아래 두 코드는 맞는 코드이긴 하지만 정상적으로 작동되지 않는다 

div plate:nth-child(3)

.table plate:nth-child(3) 

여러가지 시도해봤지만 `:nth-child(3)` 코드를 제외하고는 아무것도 작동되지 않는다

 

사이트 내에서 해당 코드만 정답으로 맞게 설정해둔 것 같다

각 레벨의 특정 요구 사항이 표준 CSS 구문과 어떻게 다른지 이해하는 것이 중요하다고 한다

 

 

 

https://flukeout.github.io/

CSS Diner

 

 

 

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요