0

I have many divs like this

<div class="msg_header msg_header_for-219 media data-message="219">
...
</div>

I use 

$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

to pick a specific id and color it red.

I want to color the rest of the divs white

so I have 2 lines

$("[class~='msg_header_for']").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");

the first one, as I understand, will select any class with msg_header_for in the class name and make it white. the second one will pick a specific one and color it red.

The red part works. The white one doesn't.

I don't understand why the first selector doesn't work. What is wrong?

Nick Ginanto
  • 31,090
  • 47
  • 134
  • 244

3 Answers3

4

From the jQuery docs:

[attribute~='value'] selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

So you need [attribute*='value'] or look for the one that fits.

elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • oh.. I was looking at http://www.w3schools.com/jquery/jquery_ref_selectors.asp which isn't as clear as the docs – Nick Ginanto Jan 26 '13 at 10:03
  • Although W3Schools says "word" as well: _All elements with a name attribute value containing the **word** "hello"_ – elclanrs Jan 26 '13 at 10:04
  • I thought `msg_header_for` is a word – Nick Ginanto Jan 26 '13 at 10:04
  • Yeah it's misleading. Those selectors are probably based on regular expressions, a word in regex is typically delimited by [word boundaries](http://www.regular-expressions.info/wordboundaries.html) `\b` which grab whole words, ignoring whitespace. – elclanrs Jan 26 '13 at 10:06
  • 1
    @Nick Ginanto: It's not as far as the selector is concerned because there's a `-219` at the end of it that isn't separated by a space. – BoltClock Jan 26 '13 at 10:07
2

the first one, as I understand, will select any class with msg_header_for in the class name

But your class name is msg_header_for-### where ### is a number, not msg_header_for. That won't select a class name with a number because it's not the exact class name, and the ~= attribute selector only looks for tokens delimited by spaces, not any other symbols. In other words, your attribute selector [class~='msg_header_for'] is actually equivalent to .msg_header_for (at least for HTML classes).

If you need to select by a class name with a prefix, you should be able to use this instead:

$("[class*='msg_header_for-']").css("background-color", "white");

For more complex cases you can use another example from this answer, but if your markup is predictable then you probably don't need such a complex selector:

$("[class^='msg_header_for-'], [class*=' msg_header_for-']").css("background-color", "white");
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

From: http://www.w3.org/TR/CSS2/selector.html#matching-attrs

[att~=val]

Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either.

What you could do is make a class that's common to all of them and select that class instead.

<div class="msg_header msg_header_for-100"></div>

And then:

$(".msg_header").css("background-color", "white");
$(".msg_header_for-<%= msg.id %>").css("background-color", "red");
thordarson
  • 5,943
  • 2
  • 17
  • 36