Learn Accessibility by Building a Quiz - Step 8

HTML-CSS
#1

Issue targeting an img element using the id selector
In a past exercise I learned that the way to do it is:

#logo img

Doing some research I found the correct sintaxis is:

#logo_img

Neither of them worked, and I can’t find how to solve it. Can u help me with this please?

Thanks in advance!

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav></nav>
   </header>
   <main></main>
 </body>
</html>


/* file: styles.css */
body {
	background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

#logo img{
	width: max(100px, 18vw);
}



   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 8

Link to the challenge:

#2

have you solved your question at this stage?

#3

Just use #logo for de selector and omit the img .
Mod Edit: removed code solution

1 Like
#4

hi Julio! Welcome to this forum!
:balloon:

Thank you so much for taking the time to help someone on the forum today. The fact that you did it almost as soon as you joined speaks to a very helpful personality (as most people who join the forum only want help for themselves initially).

I do have to remove the code you posted though only because we want to encourage everyone to learn how to overcome coding issues themselves (with support of course like hints and tips but not complete solutions).

I look forward to your future contributions to this forum and to FCC as a whole.
Thank you for your understanding.

1 Like
#5

Thank you, it is my pleasure to also give back to the community.

1 Like
#6

Hi @Iservel,

The question is asking you to “scale the image using it’s id as a selector”. As you can see you only need to select the id of the image, not the image included.

If you write it like

#logo img{
	width: max(100px, 18vw);
}

It will select any element with id of #logo and then specifically select the img element inside the element with logo as the id.
such as:

<div id="logo">
  <div>
    <div>
      ...
        <img> <!-- 👈 This img element will be selected -->
      ...
    </div>
  </div>
  <img>  <!-- 👈 This also, since its inside #logo -->
</div>

If its #logo_img, it will select any element that has the id of “logo_img”

I hope you get the picture :grin:

1 Like