Attribute with 2 words does not take CSS

Asked

Viewed 37 times

3

Hello, because this attribute using 2 words does not catch, and what I use only 1 word catches

<li data-nome="testejunto">Teste</li>

Catching example:

.item[data-nome=testejunto] {
    background: black;
    height: 100px;
    width: 120px;
}

Example that does not take

.item[data-nome=teste separado] {
    background: black;
    height: 100px;
    width: 120px;
}
html css

1 answer

7


Use quotes to delimit the attribute value in the CSS just like you did in HTML:

input[type="text 2"] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type="text 2"]:focus {
  width: 250px;
}
<h1>The width Property</h1>

<p>Set the width of the input field to 100 pixels. However, when the input field gets focus, make it 250 pixels wide:</p>

Search: <input type="text 2" name="search">

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.