Attribute with 2 words does not handle CSS

3

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

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

Sample that attaches:

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

Example not catching

.item[data-nome=teste separado] {
    background: black;
    height: 100px;
    width: 120px;
}
    
asked by anonymous 05.03.2018 / 21:36

1 answer

8

Use quotation marks to delimit the attribute value in CSS just like 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">
    
05.03.2018 / 21:39