diff --git a/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md b/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md index 6abd16109d1..40d9efc3bb6 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md +++ b/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md @@ -27,9 +27,9 @@ Fulfill the user stories below and get all the tests to pass to complete the lab 1. You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `in-progress` and set their `border` and `background-image` properties. 1. You should use an attribute selector to target the `span` elements with the class of `status` and the `span` elements with the class value starting with `rate` and set their `height`, `width`, and `padding` properties. 1. You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `border`, `border-radius`, `margin`, `height`, `width`, and `background-color` properties. -1. You should use an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. -1. You should use an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. -1. You should use an attribute selector to target the three `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +1. You should use an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. +1. You should use an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +1. You should use an attribute selector to target the three `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. # --hints-- @@ -363,56 +363,82 @@ You should use an attribute selector to target the `span` elements which are dir assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('background-color')); ``` -You should have an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value. +You should have an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value. ```js -const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :first-child'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :nth-child(1)'); -assert.exists(selector1 || selector2); +const selectors = [ + 'span[class~="one"] :first-child', + 'span[class~="one"] :nth-child(1)', + 'span[class~="one"] :first-of-type', + 'span[class~="one"] span:first-child', + 'span[class~="one"] span:nth-child(1)', + 'span[class~="one"] span:first-of-type' +] +assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors)); ``` -You should use an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. +You should use an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`. ```js -const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :first-child'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :nth-child(1)'); -assert.isTrue(selector1?.getPropVal('background-image').includes('linear-gradient(') || selector2?.getPropVal('background-image').includes('linear-gradient(')); +const selectors = [ + 'span[class~="one"] :first-child', + 'span[class~="one"] :nth-child(1)', + 'span[class~="one"] :first-of-type', + 'span[class~="one"] span:first-child', + 'span[class~="one"] span:nth-child(1)', + 'span[class~="one"] span:first-of-type' +] +assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal('background-image').includes('linear-gradient(')); ``` -You should have an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value. +You should have an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value. ```js -const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)'); -const selector3 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :first-child, span[class~="two"] :nth-child(2)'); -const selector4 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :first-child'); -assert.exists(selector1 || selector2 || selector3 || selector4); +const selectors = [ + 'span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)', + 'span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)', + 'span[class~="two"] :first-child, span[class~="two"] :nth-child(2)', + 'span[class~="two"] :nth-child(2), span[class~="two"] :first-child', + 'span[class~="two"] :nth-of-type(-n+2)', + 'span[class~="two"] :nth-child(-n+2)', + 'span[class~="two"] span:nth-child(1), span[class~="two"] span:nth-child(2)', + 'span[class~="two"] span:nth-child(2), span[class~="two"] span:nth-child(1)', + 'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)', + 'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child', + 'span[class~="two"] span:nth-of-type(-n+2)', + 'span[class~="two"] span:nth-child(-n+2)' + ] +assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors)); ``` -You should use an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +You should use an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. ```js -const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)'); -const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)'); -const selector3 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :first-child, span[class~="two"] :nth-child(2)'); -const selector4 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :first-child'); -const selectors = [selector1, selector2, selector3, selector4]; -let containsSelector = false; -for (let selector of selectors) { - if (selector?.backgroundImage.includes('linear-gradient(')) { - containsSelector = true; - } -} -assert.isTrue(containsSelector); +const selectors = [ + 'span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)', + 'span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)', + 'span[class~="two"] :first-child, span[class~="two"] :nth-child(2)', + 'span[class~="two"] :nth-child(2), span[class~="two"] :first-child', + 'span[class~="two"] :nth-of-type(-n+2)', + 'span[class~="two"] :nth-child(-n+2)', + 'span[class~="two"] span:nth-child(1), span[class~="two"] span:nth-child(2)', + 'span[class~="two"] span:nth-child(2), span[class~="two"] span:nth-child(1)', + 'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)', + 'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child', + 'span[class~="two"] span:nth-of-type(-n+2)', + 'span[class~="two"] span:nth-child(-n+2)' + ] + +assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.backgroundImage.includes('linear-gradient(')) ``` -You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value. +You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value. ```js assert.exists(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span')); ``` -You should use an attribute selector to target the `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. +You should use an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`. ```js assert.include(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span')?.getPropVal('background-image'), 'linear-gradient(');