Style content according to the HTML text within an tag - CSS-Tricks

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 16, 2011 at 10:22 am #35679
trobbins23
Member
Ive been looking all over and have not found a way (if there is a way) to do this. Is it possible to style an element (lets say a span), according to the HTML text inside of it? For example, if within the span it says “open”, like this:
```
Registration is currentlyopen
```
Is there a way to say, HTML text “open” = green. Is this possible? I appreciate any insight. Thanks!
December 16, 2011 at 10:31 am #92906

tmette
Member

I don’t think this can be done purely with CSS. However, I’m sure it’s possible to add a class to an element if the contains certain content with jQuery/JS. This way you can style the element to the class that gets assigned from the jQuery/JS.

I just don’t know how to write it for you or else I would. :)

December 16, 2011 at 5:09 pm #92926

trobbins23
Member

Thanks for the feedback. Very helpful. The jQuery one is exactly what i was looking for. Maybe one day this will be possible merely through CSS, but i’m hoping the jQuery method will work for now. Testing…

December 16, 2011 at 5:27 pm #92929
trobbins23
Member
Yes! The jQ worked. thanks again! Another item for my code library : )
Final solution:
```
Color test





















This thing is open.


This thing is closed.
```
December 20, 2011 at 4:16 am #93115

bigbossSNK
Participant

There is a pure CSS solution (IE8+), albeit using an attribute to store the desired text.
The end result is conditional styling, based on data you input.
http://dabblet.com/gist/1500881
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.