Skip to content
/ css-diner Public

Serves as a companion to the popular css diner game to help with mastering css selectors

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

daniel-farlow/css-diner

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
gifs
gifs
 
 
README.md
README.md
 
 

Repository files navigation

CSS Diner

Note: Everything in this document is based off of the CSS Diner game intended to help developers become more familiar with CSS selectors. This "companion" is simply meant to be used as a supplement/reference.

Goal of game: Select the "wiggling items" using CSS selectors.

Selectors: Go to the CSS selector descriptions and examples section to refresh your memory on a variety of CSS selectors.

Usage: For any given level, you are provided with a .gif illustrating what you are trying to select. Here is how you should go about using this companion if you do not simply go the site hosting the game:

  1. Watch: Watch the .gif to see what is wiggling.
  2. HTML Viewer: Open (i.e., click) the HTML Viewer to see what HTML actually makes up the .gif you saw in Step 1. This will be important because you will be trying to target or select named elements, and you may need to see the HTML to deduce these elements' names, what classes or attributes they may have, etc.
  3. Hint: Click the Hint if you need a nudge in the right direction. What you find in the hint will often be phraseology that more or less points you to a specific part of the CSS selector descriptions and examples section.
  4. CSS Viewer: Click the CSS Viewer to see one (or more) potential solutions. You may come up with completely different solutions! If so, consider making a pull request to this repo with your additional solution formatted as seen in the provided solution(s).

Levels

CSS Selector Descriptions and Examples

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.

Example(s) 
/* EXAMPLES */

div {
    /* style all <div> elements */
}

p {
    /* style all <p> elements */
}

ID Selector

#id

Selects an element with a specific id.

Example(s) 
/* EXAMPLES */

#cool {
    /* style the element with id="cool" */
}

/* you can also combine the ID selector with the type selector */

ul#long {
    /* style the element <ul id="long"> */
}

Descendant Selector

A B

Selects all elements B that are children of A; that is, A B is how you select an element(s) B that is inside another element A.

Example(s) 
/* EXAMPLES */

p strong {
    /* style <strong> elements that are children of <p> elements */
}

#fancy span {
    /* style any <span> elements that are inside of the element with id="fancy" */
}

Combine Descendant and ID Selectors

#id A

You can combine any selector with the descendant selector.

Example(s) 
/* EXAMPLE */

#cool span {
    /* style all <span> elements that are inside of the element with id="cool" */
}

Class Selector

.classname

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

Example(s) 
/* EXAMPLE */

.neato {
    /* style all elements with class="neato" */
}

Combining the Class Selector with Other Selectors

A.className

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

Example(s) 
/* EXAMPLES */

ul.important {
    /* style <ul> elements that have class="important" */
}

#big.wide {
    /* style the element with id="big" that also has class="wide" */
}

Combining Selectors with Commas

A, B

You can select all A and B elements (or all A, B, and C elements with A, B, C, etc.).

Example(s) 
/* EXAMPLES */

p, .fun {
    /* style all <p> elements as well as all elements with class="fun" */
}

a, p, div {
    /* style all <a>, <p>, and <div> elements */
}

Universal Selector

*

You can select all elements with the universal selector * (also known as a wildcard).

Example(s) 
/* EXAMPLES */

p * {
    /* style all elements inside of all <p> elements */
}

ul.fancy * {
    /* style every element inside all <ul class="fancy"> elements */
}

Adjacent Sibling Selector

A + B

This selects all B elements that direct follow A elements. Elements that follow one another are called siblings. They're on the same level or depth. In the HTML markup, elements that are siblings should have the same indentation level.

Example(s) 
/* EXAMPLES */

p + .intro {
    /* styles every element with class="intro" that directly follows a <p> */
}

div + a {
    /* style every <a> element that directly follows a <div> */
}

General Sibling Selector

A ~ B

Selects all elements B that follow an element A; that is, you can select all siblings of an element that follow it. This is sort of like the adjacent sibling selector (i.e., A + B) except A ~ B gets all of the following sibling elements instead of just the direct next one.

Example(s) 
/* EXAMPLE */

div.main-intro ~ p {
    /* style all elements <p> after <div class="main-intro"> that are on the same level as the div */
}

Child Selector

A > B

Selects all B that are direct children of A. You can select elements that are direct children of other elements. A child element is any element that is nested directly in another element. Elements that are nested deeper than that are called descendant elements.

Example(s) 
/* EXAMPLE */

div#container > ul {
    /* style all <ul> elements that are children of <div id="container"> */
}

First Child Pseudo-selector

A:first-child

Selects all first-child elements that are of type A. A child element is any element that is directly nested in another element. You can combine this pseudo-selector with other selectors.

Example(s) 
/* EXAMPLES */

:first-child {
    /* style all first child elements */
}

p:first-child {
    /* style all first child <p> elements  */
}

div p:first-child {
    /* style all first child <p> elements that are in a <div> */
}

Only Child Pseudo-selector

A:only-child

Selects any element A that is the only element inside of another one.

Example(s) 
/* EXAMPLES */

span:only-child {
    /* style the <span> elements that are the only child of some other element */
}

div p:only-child {
    /* style the <p> inside any <div> so long as the <p> is the only one of its kind */
}

Last Child Pseudo-selector

A:last-child

Selects any element A that is the last child of another element. You can use this selector to select an element that is the last child element inside of another element.

Example(s) 
:last-child {
    /* style all last-child elements */
}

span:last-child {
    /* style all last-child <span> elements */
}

ul li:last-child {
    /* style the last <li> element inside every <ul> */
}

Nth Child Pseudo-selector

:nth-child(A)

Selects the nth (i.e., 1st, 3rd, 12th, etc.) child element in another element.

Example(s) 
/* EXAMPLES */

:nth-child(8) {
    /* style every element that is the 8th child of another element */
}

div p:nth-child(2) {
    /* style the second <p> in every <div> */
}

Nth Last Child Selector

:nth-last-child(A)

Selects the children from the bottom of the parent. This is like nth-child but counting from the back.

Example(s) 
/* EXAMPLE */

:nth-last-child(2) {
    /* styles all second-to-last child elements */
}

First of Type Selector

A:first-of-type

Selects the first element of type A within another element.

Example(s) 
/* EXAMPLES*/

span:first-of-type {
    /* style the first <span> in any element */
}

Nth of Type

A:nth-of-type(num)

Selects an element of type A based on its order in another element (or even or odd instances of that element).

Example(s) 
/* EXAMPLES */

div:nth-of-type(2) {
    /* style the second instance of a <div> */
}

.example:nth-of-type(odd) {
    /* style all odd instances of elements with class="example" */
}

Nth of Type Selector with Formula

:nth-of-type(An+B)

The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

Example(s) 
/* EXAMPLE */

span:nth-of-type(6n+2) {
    /* style every 6th instance of a <span>, starting from (and including) the second instance */
}

Only of Type

:only-of-type

Selects the only element of its type within another element.

Example(s) 
/* EXAMPLE */

p span:only-of-type {
    /* selects a <span> within any <p> if it is the only <span> in there */
}

Last of Type

:last-of-type

Selects each last element of that type within another element.

Example(s) 
/* EXAMPLES */

div:last-of-type {
    /* styles the last <div> in every element */
}

p span:last-of-type {
    /* styles the last <span> in every <p> */
}

Empty

:empty

Selects elements that don't have any other elements inside of them.

Example(s) 
/* EXAMPLE */

div:empty {
    /* style all empty <div> elements */
}

Negation Pseudo-class

:not(X)

Selects all elements that do not match the negation selector.

Example(s) 
/* EXAMPLES */

:not(#fancy) {
    /* style all elements that do not have id="fancy" */
}

div:not(:first-child) {
    /* style every <div> that is not a first child */
}

:not(.big, .medium) {
    /* style all elements that do not have class="big" or class="medium" */
}

Attribute Selector (general)

[attribute]

Selects all elements that have a specific attribute. Attributes appear inside the opening tag of an element. For example: <span attribute="value"></span>. An attribute does not always have a value, it can be blank.

Example(s) 
/* EXAMPLES */

a[href] {
    /* style all <a> elements that have an href attribute */
}

[type] {
    /* style all elements that have a type attribute */
}

Attribute Selector (specific)

A[attribute]

Selects all elements A that have a specific attribute.

Example(s) 
/* EXAMPLES */

[value] {
    /* style all elements that have a value attribute */
}

a[href] {
    /* style all <a> elements that have an href attribute */
}

input[disabled] {
    /* styles all <input> elements with the disabled attribute */
}

Attribute Value Selector

[attribute="value"]

Selects all elements that have a specific attribute value. Attribute selectors are case sensitive.

Example(s) 
/* EXAMPLE */

input[type="checkbox"] {
    /* style all <input> elements with type="checkbox" */
}

Attribute Starts With Selector

[attribute^="value"]

Selects all elements with an attribute value that starts with specific characters.

Example(s) 
/* EXAMPLE */

.toy[category^="Swim"] {
    /* style elements with class toy and with attribute category="Swim[...]" */
}

Attribute Ends with Selector

[attribute$="value"]

Selects all elements with an attribute value that ends with specific characters.

Example(s) 
/* EXAMPLE */

img[src$=".jpg"] {
    /* style all images with a .jpg extension */
}

Attribute Wildcard Selector

[attribute*="value"]

Selects all elements with an attribute value that contains specific characters.

Example(s) 
/* EXAMPLES */

img[src*="/thumbnails/"] {
    /* style all image elements that show images from the "thumbnails" folder */
}

[class="heading"] {
    /* style all elements with "heading" in their class, like class="main-heading" and class="sub-heading" */
}

Level 1

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

Hint (or see selector reference)

In the HTML, we see that each plate is represented by <plate />. How can we select an element by type?

CSS Viewer (i.e., possible solution(s)) 
plate

Level 2

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

Hint (or see selector reference)

Note how each bento box is represented by <bento /> in the HTML. Is there a way to select elements by type?

CSS Viewer (i.e., possible solution(s)) 
bento

Level 3

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

Hint (or see selector reference)

Only one element in an HTML document should have a given id. How can you select an element by its id?

CSS Viewer (i.e., possible solution(s)) 
/* solution 1 */
#fancy /* select any element with id="fancy" */

/* solution 2 */
plate#fancy /* select the plate element with id="fancy" */

Level 4

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

Hint (or see selector reference)

The apple is on the plate, and this implies that the apple is a descendent of the plate. How can you select a descendant B of an element A?

CSS Viewer (i.e., possible solution(s)) 
plate apple

Level 5

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

Hint (or see selector reference)

The HTML shows that the pickle is a descendant of the plate with id=fancy.

CSS Viewer (i.e., possible solution(s)) 
#fancy pickle

Level 6

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

Hint (or see selector reference)

Do the small apples share a common class name?

CSS Viewer (i.e., possible solution(s)) 
apple.small

Level 7

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

Hint (or see selector reference)

We do not want to select all objects with a class of small. Can we select only the oranges that have a class of small though?

CSS Viewer (i.e., possible solution(s)) 
orange.small

Level 8

HTML Viewer 
<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>

Hint (or see selector reference)

We want the small oranges on bentos. How can we target what is on a bento? How can we target properties of what are on bentos?

CSS Viewer (i.e., possible solution(s)) 
bento orange.small

Level 9

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

Hint (or see selector reference)

How can we select multiple elements at once?

CSS Viewer (i.e., possible solution(s)) 
plate, bento

Level 10

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

Hint (or see selector reference)

Is it possible for us to select everything at once?

CSS Viewer (i.e., possible solution(s)) 
*

Level 11

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

Hint (or see selector reference)

How can we select all of the children of an element?

CSS Viewer (i.e., possible solution(s)) 
plate *

Level 12

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

Hint (or see selector reference)

How can we select each apple that is directly adjacent to a plate?

CSS Viewer (i.e., possible solution(s)) 
plate + apple

Level 13

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

Hint (or see selector reference)

We want to select all of the pickle siblings after the bento.

CSS Viewer (i.e., possible solution(s)) 
bento ~ pickle

Level 14

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

Hint (or see selector reference)

We do not want to select just any apple that is on a plate--we want to select the apple that is directly on the plate.

CSS Viewer (i.e., possible solution(s)) 
plate > apple

Level 15

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

Hint (or see selector reference)

We know we want to select the orange that is the first child of the plate. A pseudo-selector may be appropriate here ....

CSS Viewer (i.e., possible solution(s)) 
plate orange:first-child

Level 16

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

Hint (or see selector reference)

How can we select multiple things at once? How can we select the only child of an element?

CSS Viewer (i.e., possible solution(s)) 
plate apple:only-child, plate pickle:only-child

Level 17

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

Hint (or see selector reference)

There are multiple ways to do this. One somewhat contrived way is to think that the apple is the last child of the fancy plate and that the pickle is also, in some sense, the last child of its kind.

Alternatively, we really just want the child of the fancy plate that is an apple that is small as well as the pickle that is small.

CSS Viewer (i.e., possible solution(s)) 
/* Solution 1 */
plate#fancy apple:last-child, pickle:last-child /* contrived */

/* Solution 2 */
#fancy apple.small, pickle.small /* realistic */

Level 18

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

Hint (or see selector reference)

Is it possible for us to select a specific child of a certain element?

CSS Viewer (i.e., possible solution(s)) 
plate:nth-child(3)

Level 19

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

Hint (or see selector reference)

It may be obvious to use bento:first-of-type here, but can we conjure up a more contrived solution such as counting from the back? For example, counting from the last bento, we see that the bento we want to select is really the third child. How can we select this bento in terms of "last children"?

CSS Viewer (i.e., possible solution(s)) 
bento:nth-last-child(3)

Level 20

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

Hint (or see selector reference)

Is it possible for us to select the first element that is of a certain type?

CSS Viewer (i.e., possible solution(s)) 
apple:first-of-type

Level 21

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

Hint (or see selector reference)

How can we use the pseduo-selector nth-of-type to our advantage here? What kinds of parameters does this pseudo-selector accept?

CSS Viewer (i.e., possible solution(s)) 
plate:nth-of-type(even)

Level 22

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

Hint (or see selector reference)

Can we specify a selection pattern for certain types? That is, can we do something of the following sort: "Select every 4th instance of plate, starting at instance 2?"

Way we would write the above is plate:nth-of-type(4n+2)

CSS Viewer (i.e., possible solution(s)) 
plate:nth-of-type(2n+3)

Level 23

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

Hint (or see selector reference)

Is it possible to select a plate that only has a single child of the apple type?

CSS Viewer (i.e., possible solution(s)) 
plate > apple:only-of-type

Level 24

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

Hint (or see selector reference)

How can we select multiple elements that are the last of their type?

CSS Viewer (i.e., possible solution(s)) 
orange:last-of-type, apple:last-of-type

Level 25

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

Hint (or see selector reference)

Is it possible for us to select all types of an element that do not have children (i.e., are empty)?

CSS Viewer (i.e., possible solution(s)) 
bento:empty

Level 26

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

Hint (or see selector reference)

Is it possible to select an element type that does not have a certain class?

CSS Viewer (i.e., possible solution(s)) 
apple:not(.small)

Level 27

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

Hint (or see selector reference)

Is it possible to select general elements based on whether or not those elements have certain attributes?

CSS Viewer (i.e., possible solution(s)) 
[for]

Level 28

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

Hint (or see selector reference)

Is it possible to select only specific elements that have certain attributes?

CSS Viewer (i.e., possible solution(s)) 
plate[for]

Level 29

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

Hint (or see selector reference)

Is it possible to select an element not only based on it having a certain attribute but also the value of that attribute?

CSS Viewer (i.e., possible solution(s)) 
bento[for="Vitaly"]

Level 30

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

Hint (or see selector reference)

Is it possible to select elements that have an attribute whose value starts with a specified set of characters?

CSS Viewer (i.e., possible solution(s)) 
*[for^="Sa"]

Level 31

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

Hint (or see selector reference)

Is it possible to select elements that have an attribute whose value ends with a specified set of characters?

CSS Viewer (i.e., possible solution(s)) 
*[for$="ato"]

Level 32

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

Hint (or see selector reference)

Is it possible to select elements that have an attribute whose value contains a specified set of characters?

CSS Viewer (i.e., possible solution(s)) 
bento[for*="obb"]

About

Serves as a companion to the popular css diner game to help with mastering css selectors

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages