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 add ids 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

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -