You are currently viewing Solutions to CSS Diner

Solutions to CSS Diner

CSS Diner is a very nice place to let you learn CSS very fast. Simply just complete all 32 challenges and make sure you understand the intuition. If you get stuck, read below and again make sure you understand the intuition.

Generally we solve/read the selectors backwards.

Level 1


Intuition: To select all elements of a type, simply just specify the type.

Level 2


Intuition: To select all elements of a type, simply just specify the type.

Level 3


Intuition: Use an ID selector. Either use [id=”fancy”] or the shortcut for id, “#”.

Level 4

plate apple

Intuition: A Descadent Selector lets you select children elements of another element.

Level 5

#plate apple

Intuition: We want an apple within a parent of id=”plate”. This is a combination of Descedant and ID Selectors.

Level 6


Intuition: Class selector. The “.small” let us select all elements with class=”small”.

Level 7


Intuition: Combination of the Class Selector. We choose every orange with a class=”small”. Remember we don’t need to write out class, but simply just use the “.” (dot).

Level 8

bento orange.small

Intuition: Now we use, what we’ve learnt. First we want a bento element with an orange child, that holds the class “small”.

Level 9

bento, plate

Intuition: Comma Combinator. Use a comma between your selectors to combine them.

Level 10


Intuition: Use the asterisk, “*”, to select everything.

Level 11

plate *

Intuition: Combine the universal selector.

Level 12

plate + apple

Intuition: We can use the Adjacent Sibling Selector to choose all apples next to a plate.

Level 13

bento ~ pickle

Intuition: Use the General Slibling Selector to get all pickle elements next to a bento.

Level 14

plate > apple

Intuition: We use the Child Selector to chose the apple that are a child of a plate.

Level 15


Intuition: To select the first child of a group of children, use the First Child Pseudo-selector.

Level 16

plate > :only-child

Intuition: Apply the Only Child Pseudo-Selector, “:only-child”, to make sure we only look at the plates that have one child. Then we use the “plate >” to select all children to a plate.

Level 17


Intuition: We want to look at only the last children elements, hence we use the Last Child Pseudo-Selector, “:last-child”. The elements is children of the “small” class. Pro Tip: Remember we use the “.” (dot) for class.

Level 18


Intuition: We use the Nth Child Pseudo-Selector, “nth-child(3)” and simply just specify, that we want to find an element, that is the third child element of another element. If we had more elements, with 3 or more children, we could use “plate:nth-child(3)”.

Level 19


Intuition: We select the 3rd child from the end of elements with the Nth Last Child Selector, “:nth-last-child(3)”. Afterwards we tell that we only want to look at “bento” elements.

Level 20


Intuition: We use the First of Type Selector, “:first-of-type” selector and then specify that we want to look at apples.

Level 21


Intuition: Using the Nth of Type Selector, “:nth-of-type(even)” we select all even elements, in our case plates are the only elements.

Level 22


Intuition: We want to select every second element starting from (and including) the third instance. We could make a it even more specific, if we had different elements with “plate:nth-of-type(2n+3)”.

Level 23


Intuition: With the Only of Type Selector, “:only-of-type”, we select the element apple, if its the only one of it’s type within their parent element. You might want to narrow the selection with “plate apple:only-of-type”.

Level 24


Intuition: Using the Last of Type Selector we find the last element of the class small.

Level 25


Intuition: We use the Empty Selector, “:empty” to find all empty bento’s.

Level 26


Intuition: Now it’s time for the Negation Pseudo-class, “:not”. Here we select all apples, that don’t hold the class “small”.

Level 27


Intuition: We appy the Attribute selector and select all elements with a “for=” attribute.

Level 28


Intuition: Again we use the attribute selector and specify we want to select all plates with a “for=” attribute.

Level 29


Intuition: To select Vitaly’s meal we apply the Attribute Value Selector and search for the specific for value, “Vitaly”.

Level 30


Intuition: Apply the Attribute Starts With Selector and specify the characters, “Sa”.

Level 31


Intuition: Similar as Level 30 we can use the Attribute Ends With Selector and search for the attribute value of for that ends with “ato”.

Level 32


Intuition: Apply the Attribute Wildcard Selector for the for attribute with the value “obb”.

You did it! Completed 32 levels of CSS Diner

This Post Has 2 Comments

  1. Pushpendra singh

    This is a great exercise whenever I get confused between selectors this helps me alot.

    1. Anders Jensen

      Thanks a lot, Pushpendra – and I agree, I always share the challenge with my students

Leave a Reply