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 40d9efc3bb6..7917c80cb79 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 @@ -372,7 +372,13 @@ const selectors = [ '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' + 'span[class~="one"] span:first-of-type', + '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)); ``` @@ -386,7 +392,13 @@ const selectors = [ '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' + 'span[class~="one"] span:first-of-type', + '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(')); ``` @@ -394,6 +406,7 @@ assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal 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 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)', @@ -406,7 +419,19 @@ const selectors = [ '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)' + 'span[class~="two"] span:nth-child(-n+2)', + '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)); ``` @@ -426,7 +451,19 @@ const selectors = [ '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)' + 'span[class~="two"] span:nth-child(-n+2)', + '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(')) @@ -435,13 +472,21 @@ assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.background 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')); +const selectors = [ + 'span[class~="three"] span', + 'span[class~="three"] > span' +] +assert.exists(new __helpers.CSSHelp(document).getStyleAny(selectors)); ``` 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('); +const selectors = [ + 'span[class~="three"] span', + 'span[class~="three"] > span' +] +assert.include(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal('background-image'), 'linear-gradient('); ``` # --seed--