CODEWITHSUNDEEP
htmlcsscss-selectorshtml-entities
cozycone
cozycone

Reputation: 185

Escaped HTML Entities in attribute selectors

I have code similar to this:

div[data-stuff=""stuff"] {
	font-style: italic;
}
<div data-stuff="&quot;stuff">Stuff</div>

But it doesn't work. Is there a way to fix it without removing the quotation mark?

Upvotes: 4

Views: 274

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

Place a backslash before the actual character to escape it in CSS:

div[data-stuff="\"stuff"] {
	font-style: italic;
}
<div data-stuff="&quot;stuff">Stuff</div>

Or if you don't want to do that, 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>

Upvotes: 5

Related Questions