Apply CSS color to specific label based on its text

Question

I'm trying to change font color of a specific label. How to apply color depending or based on the text of that label.

I now that we can do:

SPAN.uh[title*="some_text"] 
{ color: white !important; }

Can we do something like this?

#errors > label[text*="NS_ERROR_XPC_GS_RETURNED_FAILURE"]
{ color: LIME !important; }

EDIT: That phrase "NS_ERROR_XPC_GS_RETURNED_FAILURE" is on the stylish manager of the Stylish addon for Firefox, specifically: chrome://stylish/content/edit.xul

How can I hide that phrase?

Unfortunately, there's no content selector in CSS (at least at the moment). — Hashem Qolami, Aug 23 '14 at 18:51
As long as you have control over the content, the answer lies in your question: As Hashem sayd, there is no content selector, but you could define a `data-text` attribute containing the same content. Then you could match it using `[data-text*="..."]`. — try-catch-finally, Aug 23 '14 at 18:56

score 1 · Answer 1 · answered Aug 23 '14 at 18:56

1

jQuery's selector engine has a selector for content, :contains(), but native CSS does not.

$('label:contains('some text')').css('color','Lime'); - jsFiddle Example

answered Aug 23 '14 at 18:56

Brian Dillingham

9,118
3
28
47

harshly assuming you're using jquery, if not than disregard. – Brian Dillingham Aug 23 '14 at 18:57
Is this solution not working for you in firefox? – Brian Dillingham Aug 23 '14 at 19:35
That phrase "NS_ERROR_XPC_GS_RETURNED_FAILURE" is on the stylish manager of the Stylish addon for Firefox. How can I hide that phrase? – Sam-Bo Aug 23 '14 at 19:45
You cant, the only option would be to narrow down a css selector for the element in which that text appears. My solution works for jQuery purposes, like I mentioned.. there isn't one for CSS/CSS3 – Brian Dillingham Aug 24 '14 at 00:47

Apply CSS color to specific label based on its text

1 Answers1