1 reply [Last post]
riverleaf
riverleaf's picture
Offline
newbie
Turtle Island
Last seen: 7 years 22 weeks ago
Turtle Island
Timezone: GMT-8
Joined: 2014-12-12
Posts: 2
Points: 3

html5 doc base="_blank" for a page that mostly links to other worlds, except...
NAV

nav links to page stuff, which would be _self
rather than toil though nav links one-by-one, is there a DOM (no script) method?
given, the page head base _blank.

the mundane: http://www.w3schools.com/css/css_attribute_selectors.asp
the wonder: nav a[some-attrib] { target:(_self); } etc.

any ideas? Puzzled

riverleaf
riverleaf's picture
Offline
newbie
Turtle Island
Last seen: 7 years 22 weeks ago
Turtle Island
Timezone: GMT-8
Joined: 2014-12-12
Posts: 2
Points: 3

Environment

:target is an interactive pseudo element - 'nav a:target {style}' would style elements with id of '#target'
:target { color: purple; }
a href="#submit" target="_self">SUBMIT</a
h3 id="submit">Submit</h3 ! 'Submit' is color purple
Further, 
URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target
a[target="_blank"] { background-color: yellow; } a[target="_self"] { background-color: limegreen; } 
There are many implementations for attribute selector.
http://www.w3schools.com/css/css_attribute_selectors.asp
Note,
 link target attribute is not implemented, indicating resistance to the code solution we are seeking.
http://www.w3schools.com/tags/att_link_target.asp
Similarly, the CSS target, target-new, target-position, target-name etc. properties are not implemented.
http://www.w3schools.com/cssref/css3_pr_target.asp
In the future these might hook 'nav a' to one behavior, and any other 'a' to another behavior.
For now, this task seems impossible without script to extend the static DOM.
Compare,
 link:hover:after to see how grouped attributes blocked around :target can hook target selector behavior.
.tooltip1 a[data-title]:hover:after { content: attr(data-title); }
<p class="tooltip1"> <a href="#top" data-title="some tooltip">link</a> 
substitute '.tooltip' with 'nav' 
nav a[data-link]:target:(_self) { content: attr(data-link); }