styling a node having some defined text without using javascript

Question

I have a node in my html which is as below

<h2> My Text </h2>

Is there any way to style h2 element on the basis of its Text(without using any class)
eg.

h2[text='My Text']{
color:red;
}

Please note that I don't want to use javascript code

if you don't want to use Javascript, so it may be depend on server side scripting such as PHP for example. — SaidbakR, Apr 07 '15 at 08:18
No you can't. Can you add other attributes (`data-*` or `style` for example) or do you know its position (any characteristic) in HTML code (mainly "it always has a certain parent/ancestor and it's the only one" or even "the only one *not* to have a class")? — FelipeAls, Apr 07 '15 at 08:26

score 1 · Answer 1 · answered Apr 07 '15 at 08:16

no, you can't do it with just css. there was a proposal for a contains selector but it wasn't realized. currently javascript is the only way.

If you can attach some identifier like a class to the element you can style it normally, but to answer your questions, no you can't select a element in css by it's content

Άρης Καραβάς · Answer 2 · 2015-04-07T08:31:20.593

0

Html5

<h2 class="YourClass"> My text </h2>

Css

.YourClass {
  color:red
}

For what i understood is that you want to style h2. I dont know why do you want to use javascript instead of css3.

Can you show us the div which the h2 is in? You can use a path selector.

<div>
 <nav>
   <h2>My Text</h2>
 </nav>
<div>

div nav h2 {
  color:red
}

edited Apr 07 '15 at 08:31

answered Apr 07 '15 at 08:16

Άρης Καραβάς

21
6

I dont have to use any class – Vishu238 Apr 07 '15 at 08:17
this isnt what the OP asked. – atmd Apr 07 '15 at 08:18
so you want to style h2 without having a class? – Άρης Καραβάς Apr 07 '15 at 08:21

score 0 · Answer 3 · answered Apr 07 '15 at 08:18

0

I'm afraid there isn't any way of doing this using just css. You can of course do this with javascript but since it's not an option for you then I suggest creating and adding classes according to the text will somewhat closer to what you expecting.

answered Apr 07 '15 at 08:18

Janaka Dombawela

1,337
4
26
49

score 0 · Answer 4 · answered Apr 07 '15 at 08:20

0

You could use the first line nth selector -

h2::first-line {
        color: red;
}

More info on nth selectors here - https://css-tricks.com/a-call-for-nth-everything/

answered Apr 07 '15 at 08:20

ScottMMacK

1

It will not solve my problem as it will not check "inner text". it will add color to first line of every header inrespective of its text – Vishu238 Apr 07 '15 at 08:23
How does this solve the problem posed? – TZHX Apr 07 '15 at 08:23
Would need to use JavaScript in that case to pick inner text – ScottMMacK Apr 07 '15 at 08:26

styling a node having some defined text without using javascript

4 Answers4