Which of the CSS selectors below would you prefer? (note using quotes)
[class*=col-] { /* all classes that contain 'col' */
...
}
[class*='col-'] { /* all classes that contain 'col' */
...
}
[class*="col-"] { /* all classes that contain 'col' */
...
}
I believe you can leave it unquoted if it's alphanumeric, as long as it doesn't contain ", ', `, =, <, or >.
From the HTML spec:
Attributes are placed inside the start tag, and consist of a name and a value, separated by an "=" character. The attribute value can remain unquoted if it doesn't contain space characters or any of " ' ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "=" character, can be omitted altogether if the value is the empty string.
For consistency I prefer double quotes. No point in using them only sometimes - that makes for messy and less readable code.
You can check out this interesting Unquoted attribute values in HTML and CSS/JS selectors
after cross-referencing these three different sections of the HTML spec, we can finally conclude that a valid unquoted attribute value in HTML is any string of text that is not the empty string and that doesn’t contain spaces, tabs, line feeds, form feeds, carriage returns, ", ', `, =, <, or >.
You can omit the quotes if the attribute value is alphanumeric(but do check the exception in the above article)
[class*=col-] { /* all classes that contain 'col' */
...
}
[class*=col-] is used to find where the element(within the tag) contains the class attribute value with the col- string.
