将CSS属性选择器设置为：target

Question

Not sure if this is possible or not.

Trying to dynamically set an attribute selector to the current target (without the use of any JavaScript).

Something like this css:

.tab[href=#:target] {
  // styles here for active anchor tag
}

Where the html (in Jade syntax) is:

.tab-group
  a.tab(href="#tabA") Tab A
  a.tab(href="#tabB") Tab B
  a.tab(href="#tabC") Tab C

#tabA.target
.tab-content
  h2 Tab A
#tabB.target
.tab-content
  h2 Tab B
#tabC.target
.tab-content
  h2 Tab C

In other words: How to select the anchor link that set the current hashtag (with pure CSS, no JS).

Why? For CSS-only tabs using the :target pseudo selector approach that allow for the most flexible html structure possible.

Answer 1

There are two different element types here related to the fragment identifier in the URL: there is the anchor element that the URL points to (the one with the same id as the hash in the URL) and there are the links that would point to the same URL as the current one.

:target selects the anchor element. In order to select the links, you would have to use Javascript to get the URL and then use some sort of selector like $=#YOURHASH (ends with)

If you know the tabs in advance, you may create CSS rules like this:

.tabSomething .content a[href$=#Something] {
  // style for the links that lead to tab Something, because you know the hash is #Something for that tab
}