Legen Sie CSS Atribute Selector auf: Ziel

Nicht sicher, ob dies möglich ist oder nicht.Legen Sie CSS Atribute Selector auf: Ziel

Der Versuch, einen Attributselektor dynamisch auf das aktuelle Ziel zu setzen (ohne die Verwendung von JavaScript).

So etwas wie dieses CSS:

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

, wo die HTML (in Jade Syntax) ist:

.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

Mit anderen Worten: Wie der Anker-Link wählen, die den aktuellen Hashtag gesetzt (mit reines CSS, kein JS).

Warum? Für CSS-only-Registerkarten, die den Pseudo-Selektor-Ansatz verwenden, der eine möglichst flexible HTML-Struktur ermöglicht.

Quelle

2016-04-04 Isaac Gregson

Dies funktioniert nicht ohne ein sehr kleines bisschen Javascript, da das Ziel vollständig von anderen Elementen getrennt ist und nicht direkt eine Zeichenfolge ist, nach der Sie suchen können. Also würde ich 'document.body.setAttribute ('data-url-target', location.hash)' als einzelne Zeile von JS vorschlagen und dann '[data-url-target =" # ... "] verwenden. ..', um Stilauswahlregeln für jede mögliche ID zu erstellen. – somethinghere

Dies würde einen IDref-Kombinator erfordern, der vorgeschlagen, aber weggelassen wurde. Attributselektoren können nicht in der von Ihnen beschriebenen Weise parametrisiert werden. Jeder CSS-only-Ansatz würde voraussetzen, dass Annahmen über Ihren HTML-Code getroffen werden und nur sehr wenig Flexibilität zur Verfügung steht. – BoltClock

@BoltClock: Sehr hilfreich zu wissen. Es ist schade ... Es wäre wirklich nett, das ohne JS machen zu können. –

Hier gibt es zwei verschiedene Elementtypen, die sich auf die Fragment-ID in der URL beziehen: Es gibt das Ankerelement, auf das die URL verweist (das mit derselben ID wie der Hash in der URL) würde auf die gleiche URL wie die aktuelle verweisen.

:target wählt das Ankerelement aus. Um die Links zu wählen, würden Sie haben Javascript verwenden, um die URL zu bekommen und dann eine Art von Selektor wie $=#YOURHASH (ends with)

Wenn Sie die Registerkarten im Voraus kennen, können Sie CSS-Regeln wie folgt erstellen:

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

Quelle

2016-04-04 11:34:40

Auf der Suche nach einem CSS-only-Ansatz ... Ich weiß, dass dies leicht mit JS erreicht wird. –

@Isaac Gregson: Dann gibt es keinen. – BoltClock

'.tabSomething .content a [href $ = # Etwas]' wird immer übereinstimmen. Das OP sucht nach einem Selektor, der zu * iff passt *: Ziel entspricht seinem, nun, Ziel. – BoltClock

Legen Sie CSS Atribute Selector auf: Ziel

Antwort

Verwandte Themen