Targeting element attributes in IE9+

Question

I need to target an h1 tag that has this attribute: style=color:#230870 and apply a text-shadow. It works great, except in IE of course. Sample code I've found seem to work but my code is using the '#' and in IE it gets rendered as: style="color: rgb(35, 8, 112); in the H1.

Here is my code on CodePen

#mydiv h1[style*=red] {
    text-shadow: 2px 2px 5px #443E55;
}
#mydiv h2[style*=70] {
    text-shadow: 2px 2px 1px #ffcc00;
}
#mydiv h2[style*=rgb] {
    text-shadow: 2px 2px 1px #ffcc00;
}

<div id="mydiv">
 <h1>THIS IS A REGULAR H1 TAG</h1>
 <h1 style="color:red">THIS IS H1 WITH "red" AS IT'S ATTRIBUTE VALUE AND A DROP SHADOW</h1>
 <h1 style="color:#230870">THIS H1 WITH BLUE #230870 CSS ATTRIBUE VALUE WITH A DROP SHADOW</h1>
  <h1 style="color: rgb(35, 8, 112);">THIS H1 WITH BLUE #230870 BUT IE RENDERS THE ATTRIBUTE as: 'style="color: rgb(35, 8, 112)'</h1>
  
</div>

What am I doing wrong?

Why target an h1 tag with a style attribute and not some unique id identifier? — VivekN, Jun 08 '17 at 22:50
Those are targeting examples. (Obviously only one H1 per page) -- I need to actually target any value in the rgb/rgva value - pending on is generated in my CMS. For example:

The CSS would target each one, with different color shadow, pending on what is selected in the CMS. I can't target just the 'rgb' in the code as the wrong shadow could be used. Sorry if that wasn't clear in the beginning. (Newbie at writing questions) — JPFotoz, Jun 09 '17 at 02:58
@VivekN -- I can't add id's or classes -- it's set in the CMS which I don't have control over. That is a future possibility - but for now I need a css solution. — JPFotoz, Jun 09 '17 at 03:00
I assume the use of `h2` in the CSS is a typo, and here is a possible duplicate, [https://stackoverflow.com/questions/5578845/css-attribute-selectors-the-rules-on-quotes-or-none](https://stackoverflow.com/questions/5578845/css-attribute-selectors-the-rules-on-quotes-or-none), which clarifies how to use attribute selector properly — Asons, Jun 09 '17 at 06:19
Also, IE doesn't render `rgb(35, 8, 112)`, but it will return a hex color value, like `#230870` as `rgb()` when you query which color is set, which mean, you can still use `h2[style*='70']` in the CSS to target it. Here you can read more about that: https://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value — Asons, Jun 09 '17 at 06:27
What are you doing wrong? Let's start with multiple `
` elements. You should have only 1 per page. Even if you can't edit the h1 element itself (which I'm certain you can) you can still target the h1 with the other element identifiers; `#mydiv h1` but really why not just `h1 { my styles...}`? — Seth Warburton, Jun 09 '17 at 10:13
@SethWarburton - yes of course -- I'm just trying to find the right combonation. OVBIOUSLY only one H1 per page. — JPFotoz, Jun 09 '17 at 13:39
Then simply use a class to scope that page and target the h1 directly; `.my-page h1 { my styles }`. I can't see how you would need anything more than that. — Seth Warburton, Jun 09 '17 at 13:47
@SethWarburton - Here's the tag and css. What's wrong? It doesn't render at all.
THIS H2 HAS style="color: rgb(35, 8, 112) — JPFotoz, Jun 09 '17 at 13:51
Ugh.. I missed the tick marks. This works. Thanks @SethWarburton!! h1[style*='35'] {text-shadow: 1px 3px 3px rgba(135, 206, 235, 1);} — JPFotoz, Jun 09 '17 at 13:57
What do you mean it doesn't render @photoman? And, why not just use `h1 {border:1px solid red; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1);}`? — Seth Warburton, Jun 09 '17 at 13:57

Dalin Huang · Answer 1 · 2017-06-09T14:21:56.127

0

Your HTML are all h1, but your CSS target h2 (2nd and 3rd)

Also use h1[style*="70"] to target the 2nd one

h1[style*=red] {
    text-shadow: 2px 2px 5px #443E55;
}
h1[style*="70"] {
    text-shadow: 2px 2px 1px #ffcc00;
}
h1[style*=rgb] {
    text-shadow: 2px 2px 1px #ffcc00;
}

<div id="mydiv">
 <h1>THIS IS A REGULAR H1 TAG</h1>
 <h1 style="color:red">THIS IS H1 WITH "red" AS IT'S ATTRIBUTE VALUE AND A DROP SHADOW</h1>
 <h1 style="color:#230870">THIS H1 WITH BLUE #230870 CSS ATTRIBUE VALUE WITH A DROP SHADOW</h1>
  <h1 style="color: rgb(35, 8, 112);">THIS H1 WITH BLUE #230870 BUT IE RENDERS THE ATTRIBUTE as: 'style="color: rgb(35, 8, 112)'</h1>
  
</div>

edited Jun 09 '17 at 14:21

answered Jun 08 '17 at 22:56

Dalin Huang

11,212
5
32
49

There's no need to prefix your selectors with `#mydiv`. That's just redundant code, overspecifying your selectors. – Seth Warburton Jun 09 '17 at 10:17
@SethWarburton yes, thanks, you are right, the less rule defined, the faster the selector =D I updated my code – Dalin Huang Jun 09 '17 at 14:22

score 0 · Answer 2 · answered Jun 09 '17 at 14:00

0

As there's only one h1 per page you can use a much simpler selector, there's no need to overspecify it. This should do what you need:

h1 {
   border:1px solid red; 
   text-shadow: 1px 3px 3px rgba(135, 206, 235, 1);
}

answered Jun 09 '17 at 14:00

Seth Warburton

2,234
1
16
17

score 0 · Answer 3 · answered Jun 10 '17 at 17:25

0

Thanks everyone. This was the solution, not sure who commented first. I was missing the tic marks in the search.

    h1[style*='35'] {text-shadow: 1px 3px 3px rgba(135, 206, 235, 1);}

answered Jun 10 '17 at 17:25

JPFotoz

95
4
14

Targeting element attributes in IE9+

The CSS would target each one, with different color shadow, pending on what is selected in the CMS. I can't target just the 'rgb' in the code as the wrong shadow could be used. Sorry if that wasn't clear in the beginning. (Newbie at writing questions)

` elements. You should have only 1 per page. Even if you can't edit the h1 element itself (which I'm certain you can) you can still target the h1 with the other element identifiers; `#mydiv h1` but really why not just `h1 { my styles...}`?

THIS H2 HAS style="color: rgb(35, 8, 112)

3 Answers3