Excluded HTML Objects in Attribute Selectors

Question

I have code similar to this:

div[data-stuff=""stuff"] {
	font-style: italic;
}

<div data-stuff="&quot;stuff">Stuff</div>

Run codeHide result

But that will not work. Is there a way to fix this without removing the quotation mark?

Answer 1

Place a backslash in front of the actual character to avoid it in CSS:

div[data-stuff="\"stuff"] {
	font-style: italic;
}

<div data-stuff="&quot;stuff">Stuff</div>

Run codeHide result

Or, if you do not want this, simply wrap your attribute value in single quotes instead of double quotes:

div[data-stuff='"stuff'] {
	font-style: italic;
}

<div data-stuff="&quot;stuff">Stuff</div>

Run codeHide result