[CSS] CSS Diner

ESTsoft

[CSS] CSS Diner

효땡 2024. 6. 26. 19:39

1단계

<div class="table">
    <plate />
    <plate />
</div>

plate {

}

2단계

<div class="table">
    <bento />
    <plate />
    <bento />
</div>

bento {

}

3단계

<div class="table">
    <plate id="fancy" />
    <plate />
    <bento />
</div>

#fancy {

}

4단계

<div class="table">
    <bento />
    <plate>
        <apple />
    </plate>
    <apple />
</div>

plate > apple {

}

5단계

<div class="table">
    <bento>
        <orange />
    </bento>
    <plate id="fancy">
        <pickle />
    </plate>
    <plate>
        <pickle />
    </plate>
</div>

#fancy > pickle {

}

6단계

<div class="table">
    <apple />
    <apple class="small" />
    <plate>
        <apple class="small" />
    </plate>
    <plate />
</div>

.small {

}

7단계

<div class="table">
    <apple />
    <apple class="small" />
    <bento>
        <orange class="small" />
    </bento>
    <plate>
        <orange />
    </plate>
    <plate>
        <orange class="small" />
    </plate>
</div>

orange.small {

}

8단계

<div class="table">
    <bento>
        <orange />
    </bento>
    <orange class="small" />
    <bento>
        <orange class="small" />
    </bento>
    <bento>
        <apple class="small" />
    </bento>
    <bento>
        <orange class="small" />
    </bento>
</div>

bento > orange.small {

}

9단계

<div class="table">
    <pickle class="small" />
    <pickle />
    <plate>
        <pickle />
    </plate>
    <bento>
        <pickle />
    </bento>
    <plate>
        <pickle />
    </plate>
    <pickle />
    <pickle class="small" />
</div>

plate, bento {

}

10단계

<div class="table">
    <apple />
    <plate>
        <orange class="small" />
    </plate>
    <bento />
    <bento>
        <orange />
    </bento>
    <plate id="fancy" />
</div>

* {

}

11단계

<div class="table">
    <plate id="fancy">
        <orange class="small" />
    </plate>
    <plate>
        <pickle />
    </plate>
    <apple class="small" />
    <plate>
        <apple />
    </plate>
</div>

plate > * {

}

12단계

<div class="table">
    <bento>
        <apple class="small" />
    </bento>
    <plate />
    <apple class="small" />
    <plate />
    <apple />
    <apple class="small" />
    <apple class="small" />
</div>

plate + apple {

}

13단계

<div class="table">
    <pickle />
    <bento>
        <orange class="small" />
    </bento>
    <pickle class="small" />
    <pickle />
    <plate>
        <pickle />
    </plate>
    <plate>
        <pickle class="small" />
    </plate>
</div>

bento ~ pickle {

}

14단계

<div class="table">
    <plate>
        <bento>
            <apple />
        </bento>
    </plate>
    <plate>
        <apple />
    </plate>
    <plate />
    <apple />
    <apple class="small" />
</div>

plate > apple {

}

15단계

<div class="table">
    <bento />
    <plate />
    <plate>
        <orange />
        <orange />
        <orange />
    </plate>
    <pickle class="small" />
</div>

plate > orange:first-child {

}

16단계

<div class="table">
    <plate>
        <apple />
    </plate>
    <plate>
        <pickle />
    </plate>
    <bento>
        <pickle />
    </bento>
    <plate>
        <orange class="small" />
        <orange />
    </plate>
    <pickle class="small" />
</div>

plate > apple, plate > pickle {

}

17단계

<div class="table">
    <plate id="fancy">
        <apple class="small" />
    </plate>
    <plate />
    <plate>
        <orange class="small" />
        <orange />
    </plate>
    <pickle class="small" />
</div>

#fancy > apple.small, pickle {

}

18단계

<div class="table">
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
</div>

plate:nth-child(3) {

}

19단계

<div class="table">
    <plate />
    <bento />
    <plate>
        <orange />
        <orange />
        <orange />
    </plate>
    <bento />
</div>

bento:first-of-type {

}

20단계

<div class="table">
    <orange class="small" />
    <apple />
    <apple class="small" />
    <apple />
    <apple class="small" />
    <plate>
        <orange class="small" />
        <orange />
    </plate>
</div>

apple:first-of-type {

}

21단계

<div class="table">
    <plate />
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
    <plate />
</div>

plate:nth-child(even) {

}

22단계

<div class="table">
    <plate />
    <plate>
        <pickle class="small" />
    </plate>
    <plate>
        <apple class="small" />
    </plate>
    <plate />
    <plate>
        <apple />
    </plate>
    <plate />
</div>

plate:nth-child(2n+3) {

}

23단계

<div class="table">
    <plate id="fancy">
        <apple class="small" />
        <apple />
    </plate>
    <plate>
        <apple class="small" />
    </plate>
    <plate>
        <pickle />
    </plate>
</div>

plate:nth-of-type(2) apple {

}

24단계

<div class="table">
    <orange class="small" />
    <orange class="small" />
    <pickle />
    <pickle />
    <apple class="small" />
    <apple class="small" />
</div>

orange:nth-of-type(2), apple:nth-of-type(2) {

}

25단계

<div class="table">
    <bento />
    <bento>
        <pickle class="small" />
    </bento>
    <plate />
    <bento />
</div>

bento:empty {

}

26단계

<div class="table">
    <plate id="fancy">
        <apple class="small" />
    </plate>
    <plate>
        <apple />
    </plate>
    <apple />
    <plate>
        <orange class="small" />
    </plate>
    <pickle class="small" />
</div>

apple:not(.small) {

}

27단계

<div class="table">
    <bento>
        <apple class="small" />
    </bento>
    <apple for="Ethan" />
    <plate for="Alice">
        <pickle />
    </plate>
    <bento for="Clara">
        <orange />
    </bento>
    <pickle />
</div>

[for] {

}

[속성이름]

해당 속성을 가진 요소 모두 선택

28단계

<div class="table">
    <plate for="Sarah">
        <pickle />
    </plate>
    <plate for="Luke">
        <apple />
    </plate>
    <plate />
    <bento for="Steve">
        <orange />
    </bento>
</div>

plate[for] {

}

[속성이름]

해당 속성을 가진 요소 모두 선택

29단계

<div class="table">
    <apple for="Alexei" />
    <bento for="Albina">
        <apple />
    </bento>
    <bento for="Vitaly">
        <orange />
    </bento>
    <pickle />
</div>

bento[for=Vitaly] {

}

[속성이름]

해당 속성을 가진 요소 모두 선택

30단계

<div class="table">
    <plate for="Sam">
        <pickle />
    </plate>
    <bento for="Sarah">
        <apple class="small" />
    </bento>
    <bento for="Mary">
        <orange />
    </bento>
</div>

[for^=Sa] {

}

[속성이름$="속성값"] 선택자

특정 문자열로 끝나는 요소를 모두 선택

31단계

<div class="table">
    <apple class="small" />
    <bento for="Hayato">
        <pickle />
    </bento>
    <apple for="Ryota" />
    <plate for="Minato">
        <orange />
    </plate>
    <pickle class="small" />
</div>

[for$=ato] {

}

32단계

<div class="table">
    <bento for="Robbie">
        <apple />
    </bento>
    <bento for="Timmy">
        <pickle />
    </bento>
    <bento for="Bobby">
        <orange />
    </bento>
</div>

[for*=obb] {

}

[속성이름*="속성값"] 선택자

특정 문자열를 포함하는 요소를 모두 선택