Home Specs Ideas Testing About
You are here: CSS Working Group Wiki » Ideas and Resolutions » Current URL Selector

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revisionBoth sides next revision
ideas:current-url-selector [2007/10/29 08:21] – jason_cranfordteagueideas:current-url-selector [2007/10/29 09:02] – add some more markup fantasai
Line 5: Line 5:
  
 Current CSS standards allow for the independent styling of links based on the client history using the visited link pseudo-class. This allows designers to indicate which links the visitor has been to previously. However, visitors need to not only know where they have been, but where they are and where they are going as well. Web designers need a way to conveniently style a link based on the clients current URI in order to create more useful menus and bread-crumb trails as well as indicate whether a link is pointing out of the current site. Current CSS standards allow for the independent styling of links based on the client history using the visited link pseudo-class. This allows designers to indicate which links the visitor has been to previously. However, visitors need to not only know where they have been, but where they are and where they are going as well. Web designers need a way to conveniently style a link based on the clients current URI in order to create more useful menus and bread-crumb trails as well as indicate whether a link is pointing out of the current site.
 +
  
 ===== Solution ===== ===== Solution =====
Line 11: Line 12:
  
 The current link pseudo-class selector would have the following pattern: The current link pseudo-class selector would have the following pattern:
 +  E:current(n)
  
- +Matches element ''E'' if ''E'' is the source anchor of a hyperlink of which the target matches the clients current URI if no number (''n'') is included or matches up to the directory level indicated by ''n''. A value of ''n=0'' compares only the top level domain.
-E:current(n) +
- +
- +
-Matches element E if E is the source anchor of a hyperlink of which the target matches the clients current URI if no number (n) is included or matches up to the directory level indicated by n. A value of n=0 compares only the top level domain. +
  
 So, given the links: So, given the links:
  
- +  - ''<a href=”http://www.bered.com”>RED</a>'' 
-1- <a href=”http://www.bered.com”>RED</a> +  - ''<a href=”http://www.bered.com/style>Style</a>'' 
- +  - ''<a href=”http://www.bered.com/style/prom.html>Prom Styles</a>''
-2- <a href=”http://www.bered.com/style>Style</a> +
- +
-3- <a href=”http://www.bered.com/style/prom.html>Prom Styles</a> +
  
 and the styles and the styles
  
  
-1- a:current {} +  - ''a:current {}'' 
- +  - ''a:current(0) {}'' 
-2- a:current(0) {} +  - ''a:current(1) {}'' 
- +  - ''a:current(2) {}''
-3- a:current(1) {} +
- +
-4- a:current(2) {} +
- +
- +
-If the client's current URI is: +
- +
-http://www.bered.com/style/prom.html +
- +
- +
-Link 1 would receive style 2 +
- +
-Link 2 would receive style 3 +
- +
-Link 3 would receive style 1 and 3+
  
-Style 4 would NOT be applied+If the client's current URI is: ''http://www.bered.com/style/prom.html''
  
 +  - Link 1 would receive style 2
 +  - Link 2 would receive style 3
 +  - Link 3 would receive style 1 and 3
 +  - Style 4 would //not// be applied
  
 ===== Use Cases ===== ===== Use Cases =====
 
ideas/current-url-selector.txt · Last modified: 2021/10/01 15:19 by fantasai
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki