Level 1 - Select the Plates¶

Question

Type Selector¶

A {} <- demonstrational do not add.
Select elements by their type A.
Selects all elements of type A.
Type refers to the type of tag, so div, p and ul are all different element types.

![[CSS-Diner-Double-Plate.png]]

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

Answer

plate

Level 2 - Select The Bento Boxes¶

Question

Type Selector¶

Select elements by their type A.
Selects all elements of type A. Type refers to the type of tag, so div, p and ul are all different element types.

![[CSS-Diner-Double-Bento.png]]

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

bento

Level 3 - Select The Fancy Plate¶

Question

Select elements with an ID¶

#id
Selects the element with a specific id. You can also combine the ID selector with the type selector.

![[Pasted image 20261028231247.png]]

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

#fancy

Level 4 -Select The Apple On The Plate¶

Question

Select an element inside another element¶

A B
Selects all B inside of A B is called a descendant because it is inside of another element.

![[Pasted image 20261028231543.png]]

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

plate apple

Level 5 - Select The Pickle On The Fancy Plate¶

Question

Combine the Descendant & ID Selectors¶

#id A
You can combine any selector with the descendent selector.

![[Pasted image 20261028232143.png]]

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

#fancy pickle

Level 6 - Select All The Small Apples'¶

Question

Class Selector¶

.classname
The class selector selects all elements with that class attribute. Elements can only have one ID, but many classes.

![[Pasted image 20261028232705.png]]

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

.small

Level 7 - Select The Small Oranges¶

Question

Combine the Class Selector¶

A.className
You can combine the class selector with other selectors, like the type selector.

![[Pasted image 20261028232954.png]]

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

orange.small

Level 8 - Select The Small Oranges In The Bentos¶

Question

You can do it...¶

Put your back into it!
Combine what you learned in the last few levels to solve this one!

![[Pasted image 20261028233229.png]]

<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

Level 9 - Select All The Plates & Bentos¶

Question

Comma Combinator¶

Combine Selectors with commas.
A, B
Thanks to Shatner technology, this selects all A and B elements. You can combine any selectors this way, and you can specify more than two.

![[Pasted image 20261028233641.png]]

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

plate, bento

Level 10 - Select All The Things!¶

Question

The Universal Selector¶

You can select everything!
*
You can select all elements with the universal selector!

![[Pasted image 20261028233937.png]]

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

*

Level 11 - Select Everything On A Plate¶

Question

Combine the Universal Selector¶

A *
This selects all elements inside A.

![[Pasted image 20261028234153.png]]

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

plate *

Level 12 - Select Every Apple That's Next To A Plate¶

Question

Adjacent Sibling Selector¶

Select an element that directly follows another element.
A + B
This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth.

In the HTML markup for this level, elements that have the same indentation are siblings.

![[Pasted image 20261028234339.png]]

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

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

plate + apple

Level 13 - Select The Pickles Beside The Bento¶

Question

General Sibling Selector
Select elements that follows another element,
A ~ B
You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one.

![[Pasted image 20261028235628.png]]

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