Identify Attr Selector

Question 1

[type] {
  border: 2px solid red;
}

Which attribute are styled?

<input type="text">  
<input type="password"> 
<button>Click</button>

Answer 1

<input type="text">  <!-- Styled -->
<input type="password">  <!-- Styled -->
<button>Click</button>  <!-- Not Styled (no type attribute) -->

Question 2

[type="password"] {
  background-color: yellow;
}

Which attribute are styled?

<input type="password">  
<input type="text">

Answer 2

<input type="password">  <!-- Styled -->
<input type="text">  <!-- Not Styled -->

Question 3

[class~="btn"] {
  color: white;
}

Which attribute are styled?

<div class="primary-btn">Click</div>
<div class="btn primary">Click</div>

Answer 3

<div class="primary-btn">Click</div>  <!-- Not Styled -->
<div class="btn primary">Click</div>  <!-- Styled -->

Question 4

[lang|="en"] {
  font-style: italic;
}

Which attribute are styled?

<p lang="en">Hello</p>  
<p lang="english">Hello</p>
<p lang="en-US">Hello</p>

Answer 4

<p lang="en">Hello</p>  <!-- Styled -->
<p lang="english">Hello</p>  <!-- Not Styled -->
<p lang="en-US">Hello</p>  <!-- Styled -->

Question 5

[href^="https"] {
  color: green;
}

Which attribute are styled?

<a href="http://example.com">Not Secure</a>
<a href="https://example.com">Secure Link</a>

Answer 5

<a href="http://example.com">Not Secure</a>  <!-- Not Styled -->
<a href="https://example.com">Secure Link</a>  <!-- Styled -->

Question 6

[src$=".jpg"] {
  border: 5px solid blue;
}

Which attribute are styled?

<img src="image.jpg">  
<img src="photo.png">

Answer 6

<img src="image.jpg">  <!-- Styled -->
<img src="photo.png">  <!-- Not Styled -->

Question 7

[title*="hello"] {
  text-decoration: underline;
}

Which attribute are styled?

<h1 title="say hello">Welcome</h1> 
<h1 title="greetings">Hello</h1>

Answer 7

~~~

<h1>Welcome</h1>

<!-- Styled -->

<h1>Hello</h1>

<!– Not Styled –
```>

Question 8

[disabled] {
  opacity: 0.5;
}

Which attribute are styled?

<button disabled>Click Me</button> 
<input type="text" disabled> 
<button>Click Me</button>

Answer 8

<button disabled>Click Me</button> <!-- Styled -->
<input type="text" disabled> <!-- Styled -->
<button>Click Me</button> <!-- Not Styled -->

Question 9

[inputmode="numeric"] {
  background-color: yellow;
}

Which attribute are styled?

<input inputmode="text">
<input inputmode="numeric">

Answer 9

<input inputmode="text"> <!-- Not Styled -->
<input inputmode="numeric"> <!-- Styled -->

Question 10

[class~="btn"] {
  background: blue;
}

Which attribute are styled?

<div class="primary-btn">Button</div> 
<div class="btn primary">Button</div> 
<div class="btn">Button</div>

Answer 10

<div class="primary-btn">Button</div> <!-- Not Styled -->
<div class="btn primary">Button</div> <!-- Styled -->
<div class="btn">Button</div> <!-- Styled -->

Question 11

[lang|="fr"] {
  font-style: italic;
}

Which attribute are styled?

<p lang="fr">Bonjour</p> 
<p lang="french">Hello</p> 
<p lang="fr-CA">Salut</p>

Answer 11

<p lang="fr">Bonjour</p> <!-- Styled -->
<p lang="french">Hello</p> <!-- Not Styled -->
<p lang="fr-CA">Salut</p> <!-- Styled -->

Question 12

[href^="https"] {
  color: green;
}

Which attribute are styled?

<a href="https://example.com">Secure Link</a>
<a href="https://secure.com">Safe Site</a>
<a href="http://example.com">Not Secure</a>

Answer 12

<a href="https://example.com">Secure Link</a> <!-- Styled -->
<a href="https://secure.com">Safe Site</a> <!-- Styled -->

Question 13

[src$=".jpg"] {
  border: 3px solid blue;
}

Which attribute are styled?

<img src="photo.png"> 
<img src="photo.jpg"> 
<img src="image.large.jpg">

Answer 13

<img src="photo.png"> <!-- Not Styled -->
<img src="photo.jpg"> <!-- Styled -->
<img src="image.large.jpg"> <!-- Styled -->

Question 14

[title*="discount"] {
  color: red;
}

Which attribute are styled?

<h2 title="big discount sale">Sale</h2> 
<h2 title="special offer">Offer</h2>
<h2 title="discount 50%">Sale</h2>

Answer 14

<h2 title="big discount sale">Sale</h2> <!-- Styled -->
<h2 title="special offer">Offer</h2> <!-- Not Styled -->
<h2 title="discount 50%">Sale</h2> <!-- Styled -->