CSS Conditional h2 text

Question

Is it possible to set a conditional for the h2 text of a class? the h2 does not have a unique class or id to it, and multiple h2's with a dynamic changing order. So i can't target say the 3rd h2 because its always shifting.

h2.arker.fun.header {
// some statement If h2 text = "Gamer" then set text-transform: lowercase
}

No. CSS can't detect content...only style it. – Paulie_D Mar 20 '15 at 17:03 — Paulie_D, Mar 20 '15 at 17:03

score 2 · Answer 1 · answered Mar 20 '15 at 17:08

2

There was once proposed one pseudo class known as :contains to handle this situation. But they haven't added it yet in the current draft of CSS3.

However you may use some Javascript. For Example to deal with this problem

for (var i= document.links.length; i-->0;){
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
        document.links[i].style.color= 'red'; }

Hope you are not restrained from using Javascript.

answered Mar 20 '15 at 17:08

YourFriend

434
4
7

This is the way to go. If they are using the JQuery, libs, there are much better ways to go as well. – grepsedawk Mar 21 '15 at 19:24

coma · Answer 2 · 2015-03-20T17:21:14.890

0

As others (@Paulie_D, @Mia Marks, @YourFriend) have already pointed out, there is no CSS < 4 selector based on content and the closest you can get is the attribute selector.

Just a crazy idea:

h2.arker.fun.header:before {
  content: attr(data-text);
}

h2.arker.fun.header[data-text="Gamer"] {
  text-transform: lowercase;
}

<h2 class="arker fun header" data-text="Gamer"></h2>

don't do it at home...

edited Mar 20 '15 at 17:21

answered Mar 20 '15 at 17:11

coma

16,429
4
51
76

That would **add** the text...not detect it. – Paulie_D Mar 20 '15 at 17:13
@Paulie_D Sure, add it and apply the style based on the attribute's content... it's a crappy idea but hey, it's just for fun. – coma Mar 20 '15 at 17:15
So a fundamental change to the HTML to remove **actual content** from the DOM...ugh! – Paulie_D Mar 20 '15 at 17:16
@Paulie_D Of course this is ugly as hell, again, DON'T TRY THIS. – coma Mar 20 '15 at 17:17
@coma Your fun may ruin someone's life xD – YourFriend Mar 20 '15 at 17:27
@YourFriend I'm about to delete this since I suffer from downvote panic. – coma Mar 20 '15 at 17:30
@coma LOL, I don't think this question will remain on the top for much time. Soon it will get hidden beneath other questions – YourFriend Mar 20 '15 at 17:44

score -2 · Answer 3 · answered Mar 20 '15 at 17:11

-2

u can add attribute in that h2 tag and put the condition like: h2[if='mytype']{text-transform:lowercase;}

answered Mar 20 '15 at 17:11

user2485617

3
3

1

This is not correct. CSS can't detect inner text. You would have to use JQuery or something similar. – grepsedawk Mar 20 '15 at 17:23

CSS Conditional h2 text

3 Answers3