fix(curriculum): change of not indicated a elements fail tests (#54455)

Co-authored-by: Lasse Jørgensen <28780271+lasjorg@users.noreply.github.com>
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md

@@ -13,18 +13,28 @@ Change the font color of all the anchor elements within the list elements to som
 
 # --hints--
 
-You should use the `li > a` selector.
+Your selector should target links inside list items.
 
 ```js
-const anchors = document.querySelectorAll('li > a'); 
-anchors.forEach(a => assert.exists(getComputedStyle(a))); 
+const anchors = document.querySelectorAll('li > a');
+anchors.forEach(a => assert.exists(getComputedStyle(a)));
 ```
 
-You should give the `a` element a `color` property.
+You should give the `a` elements inside list items a `color` property.
 
 ```js
-const anchors = document.querySelectorAll('li > a'); 
-anchors.forEach(a => assert.notEmpty(getComputedStyle(a)?.color)); 
+const helper = new __helpers.CSSHelp(document);
+
+const usedSelector = code.match(/^\s*?(.*?a)\s*?{/m)[1];
+assert.notEmpty(helper.getStyle(usedSelector)?.color);
+```
+
+You should only change the color of `a` elements inside list elements.
+
+```js
+const footerAnchor = document.querySelector('footer a');
+const listAnchors = document.querySelectorAll('li a');
+listAnchors.forEach(listAnchor => assert.isFalse(getComputedStyle(footerAnchor)?.color === getComputedStyle(listAnchor)?.color));
 ```
 
 You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#dfdfe2`_
@@ -55,7 +65,6 @@ for (let elem of document.querySelectorAll('li > a')) {
 }
 ```
 
-
 # --seed--
 
 ## --seed-contents--