html - Semantic way to select current or active links in navigation menu -
currently common way identify current link adding class anchor or parent:
<li class="active"><a href="/">home</a></li>
this technique has couple of drawbacks:
- adding class delegated server languages , means work presentation.
- even though there convention around
active
class name, it's stupid selector , doesn't seem semantically correct.
i tried following no success:
- i looked
:target
pseudo-class, selector be:a:current
, unfortunately doesn't exist yet. - i thought
rel
attribute candidate, couldn't find fit. adding , attibute
nav
sets current link, need addid
s every link, , css become verbose<style> [data-active^="home"] a[id^="home"]{ color:red; } </style> <nav data-active="home-link"><ul> <li><a id="home-link">home</a> ...
is there different way select current links semantically correct?
the purpose of selecting css current or active link give user clue section or document viewing. @boltclock pointed out active
class semantically meaningless , question if there semantically meaningful way select link belongs section or document user visting?
current concept css doesn't have because css isn't involved route handling. use active/current/at class names because it's easiest way.
javascript can set/remove classes based on routing, can server-side languages.
also, navigation structures different , in example, it's not anchor that's active, li
. should left developers establish based on needs of styles.
Comments
Post a Comment