Responsive Web Design ==> Basic CSS ==> Course 22 (Use Attribute Selectors to Style Elements)

HTML-CSS
1

To do: For this challenge, you will use the [attr=value] attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute type and a corresponding value of radio

Referred to this and this. Tried everything mentioned in the links. Didn’t work.

Tried to use: [type=“checkbox”] and input[type=“checkbox”] and [type=‘checkbox’] and input[type=‘checkbox’]. nothing worked.

Code so far:

<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;

  }

  [type="checkbox"] {

    margin: 10px, 0px, 15px, 0px;

  }

  .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>

Error message I get:
// running tests
The top margins of the checkboxes should be 10px.
The bottom margins of the checkboxes should be 15px.
// tests completed

Can someone please suggest what I can do here?

2

you dont need “” in the value.

3

But I tried [type=‘checkbox’] as well. It didn’t work.

4

[type=checkbox]
Without “” nor ‘’

5

Hi there,

Hi! I’m able to pass with the syntax you said you’d tried. Do you have any ad blockers or dark mode extensions running in your browser? That can mess with the checker and you’ll need to turn them off.

6

Doesn’t work with or without any quotation mark.

7

I just have my chrome using the dark theme. Had a Selenium extension, but I removed it now. Still the code doesn’t give the expected output.

8

The complete syntax is input[type=checkbox]
If this dont work I really dont know

9

I have tried
[type=“checkbox”] and
input[type=“checkbox”] and
[type=‘checkbox’] and
input[type=‘checkbox’] and
input[type=checkbox]

Nothing worked…

10

RESOLVED!!!

Apparently, I needed to use the following code snippet:

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

Instead of:

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

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