flukeout.github.io Open in urlscan Pro
2606:50c0:8001::153  Public Scan

Form analysis
0 forms found in the DOM

Text Content

CSS Diner

Share


SELECT THE PLATES


NO WORRIES, YOU'VE GOT THIS!

You're about to learn CSS Selectors! Selectors are how you pick which element to
apply styles to.

EXHIBIT 1 - A CSS RULE

p {
   margin-bottom: 12px;
}

Here, the "p" is the selector (selects all <p> elements) and applies the
margin-bottom style.

To play, type in a CSS selector in the editor below to select the correct items
on the table.If you get it right, you'll advance to the next level.

Hover over the items on the table to see their HTML markup.

Get help with selectors on the right! →

Ok, got it!
Help, I'm stuck!

style.css
CSS Editor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+
enter
{
/* Styles would go here. */
}

/*
Type a number to skip to a level.
Ex → "5" for level 5
*/
table.html
HTML Viewer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="table">
<plate />
<plate />
</div>

Made by @flukeout — come say hi!

Have feedback or questions? Please file an isssue on the Github repo.





LEVEL 1 OF 32





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.

EXAMPLES

div selects all div elements.
p selects all p elements.


CHOOSE A LEVEL

1A2A3#id4A  B5#id  A6.classname7A.className8Put your back into it!9A,
B10*11A  *12A + B13A ~ B14A >
B 15:first-child16:only-child17:last-child18:nth-child(A)19:nth-last-child(A)20:first-of-type21:nth-of-type(A)22:nth-of-type(An+B)23:only-of-type24:last-of-type25:empty26:not(X)27[attribute]28A[attribute]29[attribute="value"]30[attribute^="value"]31[attribute$="value"]32[attribute*="value"]
Reset Progress