I've having issues while trying to use attributes selctors to style elements. I cant pass the challenge. I need help

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>   [type='checkbox']{margin: 10px 0px 15px 0px}
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, monospace;
}

p {
  font-size: 16px;
  font-family: monospace;
}

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

.smaller-image {
  width: 100px;
}

.silver-background {
  background-color: silver;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<div class="silver-background">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 6.0; HUAWEI VNS-TL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Mobile Safari/537.36

Challenge: Use Attribute Selectors to Style Elements

Link to the challenge:

inside ur style

[type='checkbox'] {
    margin-top: 10px;
    margin-bottom: 15px;
  }

I see you started entering your attribute selector on the same line as your opening style tag. It’s good practice to start a new tag on a new line.

Your syntax looks good, just missing a semi-colon at the end. I’d suggest resetting your code and try again. If you copy and paste your selector, retype all the brackets. I find things can get a little buggy and you have to play with it a few times to pass.

Hi @nickychi,

Know that your code is good, as suggested before you should just indent well the code for better visibility and debug purposes. Also, the semicolon for the last instruction of a CSS rule is not compulsory but strongly recommended. It is my personal advice.

To talk about the issue you have, it is really tricky. You have an issue with your square brackets. I don’t really know how to show you but let me try.

Do you see the syntax color for type? The difference between yours and the class example? There is kind of space for each of your square brackets:


Do you see when we try to select? You can try yourself even with the arrows of the keyboard. Did you type the square brackets or you copied/pasted them?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.