CSS attribute-value selector doesn't work if value contains hash # sign

Question

Am using bootstrap LIKE dropdown menu with custom HTML5 attribute with data- as a prefix with a value starting from #, now for some reason I can't change this.

Here's the script link (It's like this <a href="#" data-dropdown="#dropdown-1">dropdown</a>)

Now the issue is am using dynamic approach using PHP so child of an element changes often so I am not using nth-child so thought of using attribute-value selector but CSS doesn't accept if value contains #. Any workarounds for this?

<div data-demo="works">This works</div>
<br />
<div data-demo="#doesnt_works">This fails</div>

CSS

div[data-demo=works] {
    color: red;
}

div[data-demo=#doesnt_works] {
    color: green;
}

Demo

Answer 1

Use quotes:

div[data-demo='#does_work'] {
    color: green;
}

DEMO

Why it has to be quoted? Because # has special meaning in CSS. Quoting it hides that special meaning. The same effect could be approached using ": [data-demo="#does_work"] or by escaping # with \: [data-demo=\#does_work]

Answer 2

Wrap the value in quotes "

div[data-demo="#doesnt_works"] {
    color: green;
}

http://jsfiddle.net/jeq5W/1/