CSS select element based on fragment identifier in href attribute
-
28-06-2021 - |
Frage
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).
Lösung
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.