| CARVIEW |
Select Language
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
last-modified: Sun, 20 Sep 2020 20:37:41 GMT
access-control-allow-origin: *
etag: W/"5f67bd95-193f"
expires: Tue, 30 Dec 2025 23:15:23 GMT
cache-control: max-age=600
content-encoding: gzip
x-proxy-cache: MISS
x-github-request-id: 7581:21D6A4:A9DE8C:BEC87B:69545AB3
accept-ranges: bytes
date: Wed, 31 Dec 2025 00:28:50 GMT
via: 1.1 varnish
age: 0
x-served-by: cache-bom-vanm7210032-BOM
x-cache: HIT
x-cache-hits: 0
x-timer: S1767140930.407022,VS0,VE200
vary: Accept-Encoding
x-fastly-request-id: 63392ade393aee1121418ba6a8f6f716ba36fa91
content-length: 2128
CSS Diner - Where we feast on CSS Selectors!
CSS Diner
Help, I'm stuck!
/*
Type a number to skip to a level.
Ex → "5" for level 5
*/
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!style.css
CSS Editor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
enter
{
/* Styles would go here. */
}
/* 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Made by @flukeout — come say hi!
Have feedback or questions? Please file an isssue on the Github repo.