Learn Accessibility by Building a Quiz - Step 56

[benfitzgerald]

Hi all,

Code is failing, telling me to use these exact CSS selectors. Styling result even looks correct. Cannot work out why this code is failing, anyone got a clue?

.info > input  {
  width: 50%;
  text-align: left;
  display: inline-block;
}

.info > label  {
  width: 10%;
  min-width: 55px;
  display: inline-block;
  text-align: right;
}

Challenge: Learn Accessibility by Building a Quiz - Step 56

Link to the challenge:

freeCodeCamp.org

[Isabella-Tsai]

technically what you did is correct but it did not meet the challenge request.

my suggestion: Restart Step to reset the code, since the original code selectors does not use parent children element relationship( '> '), it use element inside element

CSS Selectors Reference

then style the display and text-align of .info label, .info input together .
I understand that .info input has already had text-align style. This challenge also let you learn CSS Specificity / CSS hierachy override , which style will be applied if there are more than one CSS point to the same element

Hope this will help, Happy coding

[benfitzgerald]

Thanks Isabella, I have worked it out by searching for others having the same problem.
I now realize (as you suggest) that the challenge wants you to use a combined selector of:
.info label, .info input {“”} and to remove the text-align: left; from .info > input.
I appreciate you pointing out the CSS Specificity / CSS hierarchy override, I was confused about how the labels and inputs were achieving their right/left alignment.
Thanks for your generous assistance.

[jorgeberruete]

Hey everyone, this is what I got but got an error as well

[benfitzgerald]

Hi Jorge,

Yes, I, and it would seem many others, have had a lot of trouble getting past this step, instructions are not as clear as they could be.

You need three CSS selectors as follows:
.info label, .info input {“”} in which you just set the display to inline-block and text-align right,
.info input {“”} in which you just set width to 50% and text-align left and
.info label {“”} in which you just set width to 10% and min-width to 55px.

Code should then pass.
Cheers,
Ben