Use Attribute Selectors to Style Elements help

Use Attribute Selectors to Style Elements help
0

You may notice that the example doesn’t have the word “input” in it.

[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}
but sir… this one also not working…

When I cut and paste your code into the problem, putting it inside the style markers, it’s on my line 30 … When I do that, it fails. It looks like there are “smart” or curly quotes. JS doesn’t like those. When I replace those with “dumb” or straight quotes, it works.


its still not working sir…

Hey, the problem is with your cut and paste thing from example.

you can write the attribute selector in either way ie

input[type="checkbox"] (or) [type="checkbox"] both will target the same element checkboxes.

input[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}

1 Like

The code is not working because you have to manually update the

in your challenge. Type these on your keyboard, not to copy and paste.

i typed it… but still same sir… its not working

Then there’s a cache issue, please copy the url link of that challenge and paste in different browser and try again.
or
Please clear the cache of the existing browser, you can do ‘Hard clear’ in chrome refresh, then try again.

Acutally we can use input.

OK, sorry, CSS isn’t my strength. I was just looking for differences. I also don’t know enough about the testing to know if it is evaluating based on what is written or by its effects.

OK, your answer looks good to me. Try this exact code, cut and paste:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .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;
  }

  [type='checkbox'] {
    margin: 10px 0px 15px 0px;
  }
</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://bit.ly/fcc-relaxing-cat" 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="/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>

Other than that, as others have mentioned. Try a different browser. Sometimes you get weird caching issues. Clear the browser cache, try it on a different browser, reboot, try a different computer, etc.

trying on different browsers also now working…

try this instead of " margin: 10px 0px 15px 0px;"
it worked with me.

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

i tried… not working sir…

I have also issue with this challenge and tried everything that was suggested here.

Clear the caches and cookies of your browser as suggested, it will work!
Mine worked just now!! :slight_smile:

2 Likes

Hey Sara, you’re a hero for this!:sunglasses: FCC Needs to remind everybody to occasionally clear their browsers cache or else it’ll break FCC.

@imabdulmalik I was experiencing the same issue and found out its in the wording make sure it says checkbox and not checkboxes.

[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}
This will work if not I’m not sure why because it works for me and I even added the “checkbox” and it still worked with that one too. :wink:

If you haven’t solved yet after two months… i see this problem,

  .smaller-image {
    width: 100px;
  }
 
 }

An extra closing curly brace, removing that might help
then add the checkbox style

[type='checkbox'] {
margin: 10px 0px 15px 0px;
}

Thanks a ton!!!

I was wondering why even

[type=‘checkbox’] {
margin: 10px 0px 15px 0px;
}

cannot work.

You just save me!!!

you move it to the top behind tag style . it will work.