How to style data-scribe in CSS

Question

How do I style a span by its data-scribe.

eg. in my html there is:

<span data-scribe="element:verified_badge">✔</span>

How could I add CSS styling to this specific span?

Answer 1

You could use the attribute selector and do something as simple as:

span[data-scribe] {
    color:green;
}

or more specific like:

span[data-scribe="element:verified_badge"] {
    color:green;
}

jsFiddle example