Attribute Selectors to CSS Elements

Tell us what’s happening:

Your code so far

Hello guys, an exercise from Free Code Camp shows me this  issue:
 "The type attribute selector should be used to select the checkboxes."
The problem is that I don't know how use this "[attr=value]" in parte of my code. 
Somebody help me, please?

"here was a link"
<style>
  [type='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 "here was a link">cat photos</a>.</p>
  
  <a href="#"><img class="smaller-image thick-green-border" "here was a link" 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>*/

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

 [type='red-text'] 

red-text is a class, not a type. Added to that, you are supposed to select your checkbox elements. Your checkboxes do not have the class red-text so selecting on red-text would not affect your checkboxes anyway.

Given the following element:

<input type="radio" name="indoor-outdoor" value="Close the darn door!" checked>

We can see that it hasn’t got ANY class, but it does have some attributes:

  • type is an attribute with the value ‘radio’
  • name is an attribute with the value ‘indoor-outdoor’
  • value is an attribute (I made that one up), with a value ‘Close the darn door!’
  • checked is an attribute. But what is that one set to? Well, that’s a special case – it simply exists. By existing, it can be said to be set to true.

So, given that, how would we use the attribute selector? Remember, it’s syntax is:

[attributeName = 'attributeValue']

The value does need to be quoted, or a valid string. How might we use that to select, say, the input based on it’s type attribute?

Note that, in the case of checked, it’s a whole different attribute selector method, and a discussion for a different day. :wink:

2 Likes

that stuff you said, do I need put it inside my style? :thinking:

yeah, true! tks, this stuff is wrong in fact.

So yup. That would be in the CSS definition. In CodePen, that would be in the CSS tab. If, for example, I wanted to select all the TEXT input boxes (that is, those with type="text", I would put the following rule in my CSS:

input[type='text'] {

}

Doesn’t matter if I use single or double quotes, long as I quote the value I intend to select.