feat: adding explanation for id selector for cafe menu project (#51437)

2026-09-24 23:01:18 +08:00 · 2023-09-05 11:41:32 -07:00
parent 3fe2d1aec0
commit 59a726fb1d
8 changed files with 56 additions and 32 deletions
@@ -7,7 +7,9 @@ dashedName: step-24

 # --description--

-Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`). 
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).

 # --hints--

@@ -39,7 +41,7 @@ assert(!hasWidth);
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
-    <div>
+    <div id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
@@ -63,7 +65,7 @@ h1, h2, p {
  text-align: center;
 }
 --fcc-editable-region--
-div {
+#menu {
  width: 300px;
  background-color: burlywood;
 }
@@ -14,7 +14,7 @@ Comments in CSS look like this:
 /* comment here */
 ```

-In your style sheet, comment out the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again.
+In your style sheet, comment out the line containing the `background-color` property and value, so you can see the effect of only styling the `#menu` element. This will make the background white again.

 # --hints--

@@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)")
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
-    <div>
+    <div id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
  text-align: center;
 }

-div {
+#menu {
  width: 300px;
 }
 ```
@@ -7,7 +7,9 @@ dashedName: step-26

 # --description--

-So far you have been using type selectors to style elements. A <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
+So far you have been using type and id selectors to style elements. However, it is more common to use a different selector to style your elements. 
+
+A <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:

 ```css
 .class-name {
@@ -15,7 +17,7 @@ So far you have been using type selectors to style elements. A <dfn>class select
 }
 ```

-Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.

 # --hints--

@@ -26,10 +28,10 @@ const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
 assert(hasMenu);
 ```

-You should not have a `div` selector.
+You should not have a `#menu` selector.

 ```js
-const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+const hasDiv = new __helpers.CSSHelp(document).getStyle('#menu');
 assert(!hasDiv);
 ```

@@ -47,7 +49,7 @@ assert(!hasDiv);
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
-    <div>
+    <div id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
@@ -72,7 +74,7 @@ h1, h2, p {
 }

 --fcc-editable-region--
-div {
+#menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
@@ -7,14 +7,24 @@ dashedName: step-21

 # --description--

-The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`.
+The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. 
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> is defined by a name with a hash symbol directly in front of it, like this:
+
+```css
+#example-id {
+  width: 250px;
+}
+```
+
+Use the `#menu` selector to give your element a width of `300px`.

 # --hints--

-You should have a `div` type selector.
+You should have a `#menu` selector.

 ```js
-const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+const hasDiv = new __helpers.CSSHelp(document).getStyle("#menu");
 assert(hasDiv);
 ```

@@ -28,7 +38,7 @@ assert(hasWidth);
 Your `div` should have a width of 300px.

 ```js
-const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
+const divWidth = new __helpers.CSSHelp(document).getStyle("#menu")?.getPropertyValue('width');
 assert(divWidth === '300px');
 ```

@@ -46,7 +56,7 @@ assert(divWidth === '300px');
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
-    <div>
+    <div id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
@@ -7,7 +7,7 @@ dashedName: step-23

 # --description--

-Now use the existing `div` selector to set the background color of the `div` element to be `burlywood`.
+Now use the existing `#menu` selector to set the background color of the `div` element to be `burlywood`.

 # --hints--

@@ -18,10 +18,10 @@ const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x
 assert(hasBackgroundColor);
 ```

-Your `div` should have a burlywood background.
+Your `#menu` selector should have a burlywood background.

 ```js
-const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
+const divBackground = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('background-color');
 assert(divBackground === 'burlywood');
 ```

@@ -39,7 +39,7 @@ assert(divBackground === 'burlywood');
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
-    <div>
+    <div id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }

 --fcc-editable-region--
-div {
+#menu {
  width: 300px;
 }
 --fcc-editable-region--
@@ -7,7 +7,7 @@ dashedName: step-25

 # --description--

-Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element.
+Next, you want to center the `#menu` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `#menu` element within the `body` element.

 # --hints--

@@ -25,11 +25,11 @@ const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.styl
 assert(hasMargin);
 ```

-You should set the `margin-left` and `margin-right` properties of your `div` to `auto`.
+You should set the `margin-left` and `margin-right` properties of your `#menu` to `auto`.

 ```js
-const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
-const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
+const divMarginRight = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('margin-right');
+const divMarginLeft = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('margin-left');
 assert(divMarginRight === 'auto');
 assert(divMarginLeft === 'auto');
 ```
@@ -48,7 +48,7 @@ assert(divMarginLeft === 'auto');
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
-    <div>
+    <div id="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }

 --fcc-editable-region--
-div {
+#menu {
  width: 80%;
  background-color: burlywood;
 }
@@ -7,7 +7,7 @@ dashedName: step-27

 # --description--

-To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`.
+To apply the class's styling to the `div` element, remove the `id` attribute and add a `class` attribute to the `div` element's opening tag. Make sure to set the class value to `menu`.

 # --hints--

@@ -23,6 +23,12 @@ Your `div` element should have the `menu` class.
 assert($('div').attr('class').includes('menu'));
 ```

+Your `div` element should no longer have the `menu` id.
+
+```js
+assert(!$('div#menu').length);
+```
+
 # --seed--

 ## --seed-contents--
@@ -38,7 +44,7 @@ assert($('div').attr('class').includes('menu'));
  </head>
  <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
      <main>
        <h1>CAMPER CAFE</h1>
@@ -9,12 +9,15 @@ dashedName: step-20

 The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`.

+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
 # --hints--

-You should have an opening `<div>` tag.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.

 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```

 You should have a closing `</div>` tag.
@@ -36,6 +39,7 @@ const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```

+
 # --seed--

 ## --seed-contents--