Learn Accessibility by Building a Quiz - Step 56

HTML-CSS
#1

hello guys I am unable to pass this step 56
Challenge: Learn Accessibility by Building a Quiz - Step 56

Link to the challenge:

I wrote like this
.info > label, .info > input {
display: inline-block;
text-align: right;
}
but
it is giving a hint
You should set the text-align: right property before the .info input rule
can anybody teach me

2 Likes
#2

Make sure you add the selector before the two other selectors, not after.

6 Likes
#3

Thanks lasjorg, for your help

#4

Hi, I am getting the same hint. I don’t understand what you mean in your comment.

#5

I am having the same hint. Can you explain what lasjorg means?

#6

mod edit: solution removed.

#7

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

#8

I’m curious as to why this is order is important, if you’d be so kind as to indulge me!

#9

Because you are asked to right align the text but it has to not overwrite the text-align property on the .info input selector.

Personally, I think it is an odd way of writing it. I would set the display on both and the right align only on the label.

1 Like
#10

Thanks so much for explaining!

#11

Bro
To be frank , I tried to remember the solution but couldn’t, I am learning since like 2 months , I still didn’t master html, css
So sorry

#12

I think this is ok to say regarding the problem. I just remembered this. The rule regarding over riding classes and id is depending on location of it. Im not a hundred percent sure, but it depends on this. With classes the parent over rides the children. so by putting the two above the input would override it is in css

#13

Thank you. But I still don’t understand why the order is important.

#14

The C in CSS stands for Cascade.

You are setting both the label and input to text-align: right and then overwriting that for the input in the selector below the list selector.

As I said, it isn’t how I would do it and I don’t think it is a good use of the cascade, to be honest.

Example

<article>
  <h2>Title</h2>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore soluta adipisci ratione cumque tenetur et explicabo omnis quas, facere hic minima laborum temporibus doloribus quasi est eaque unde neque iure!</p>
</article>

article h2,
article p {
  margin-top: 0;
  /* Both elements are red */
  color: red;
}

article p {
  /* overwrite it for the p element to be blue */
  color: blue;
}

I would suggest doing this instead.

article h2,
article p {
  margin-top: 0;
}

article h2 {
  color: red;
}

article p {
  color: blue;
}