CSS select element based on fragment identifier in href attribute

Question

I am using the tabview, which is part of the YUI3 library.

The markup basically looks like this:

<div id="demo" class="yui3-tabview-content">
  <ul class="yui3-tabview-list">
    <li class="yui3-tab yui3-widget yui3-tab-selected">
      <a href="#foo" class="yui3-tab-label yui3-tab-content" tabindex="0">foo</a>
    </li>
  </ul>
  <div class="yui3-tabview-panel">
    <div id="foo" class="yui3-tab-panel yui3-tab-panel-selected">
      <p>
        foo content
      </p>
    </div>
  </div>
</div>

A fiddle of the markup: http://jsfiddle.net/zb6su/

Problem: I am writing some javascript code and would like to select a tab given the tabview-panel. Let's say I was able to get the id, foo, in this case. I would like to select the tab with a[href=#foo].

The problem is that a[href=#foo] does not work at all, because # is used to select Ids. I have also tried a[href="#foo"] to no avail. Is there a css selector to select a link based on a URL fragment in the href attribute?

I know that with javascript, I can iterate through all the nodes and check the href attribute, but I would prefer to use a CSS selector where possible.

---

Update: The selector does work. It looks like it's a bug in FireFinder (an extension I am using to test the selectors).

Answer 1

It works fine with the same selector, but using jQuery (fiddle).

$('a[href="#foo"]').text();

Returns "foo". Same with CSS:

a[href="#foo"] {
    color:red;
}

---

It seems that the problem was more with F21's FireFinder, not the usage of a[href="#foo"]. Case closed.