Results 1 to 5 of 5

Thread: Styling the parent of a visited link

  1. #1
    HEXUS webmaster Steve's Avatar
    Join Date
    Nov 2003
    Posts
    14,276
    Thanks
    292
    Thanked
    837 times in 473 posts

    Styling the parent of a visited link

    This is a CSS question, but in light of CSS's parent -> child structure (and nothing going the other way) could well be a javascript one.

    Say I have a block element, and somewhere within it a link. If that link has been :visited, what's the friendliest way of applying a style to that parent block element?

    Cheers,
    PHP Code:
    $s = new signature();
    $s->sarcasm()->intellect()->font('Courier New')->display(); 

  2. #2
    Large Member
    Join Date
    Apr 2004
    Posts
    3,720
    Thanks
    47
    Thanked
    99 times in 64 posts

    Re: Styling the parent of a visited link

    Yea you would be looking at javascript there:

    Code:
    // Not tested; jquery, many other ways to do this
    $(document).ready( function() {
      // Add the class "myclass" to all div's with a child of at least one a:visited
      $('div:has(a:visited)').addClass('myclass');
    });
    To err is human. To really foul things up ... you need a computer.

  3. #3
    HEXUS webmaster Steve's Avatar
    Join Date
    Nov 2003
    Posts
    14,276
    Thanks
    292
    Thanked
    837 times in 473 posts

    Re: Styling the parent of a visited link

    But that's not just javascript, it's jQuery.

    I'd prefer to use ExtJS, but it's domquery doesn't work on :visited
    PHP Code:
    $s = new signature();
    $s->sarcasm()->intellect()->font('Courier New')->display(); 

  4. #4
    HEXUS webmaster Steve's Avatar
    Join Date
    Nov 2003
    Posts
    14,276
    Thanks
    292
    Thanked
    837 times in 473 posts

    Re: Styling the parent of a visited link

    In the interest of trying it out $('div:has(a:visited)') errors with "fn is not a function". But non-link related pseudo-classes, such as :first-child, work properly.

    Bums
    PHP Code:
    $s = new signature();
    $s->sarcasm()->intellect()->font('Courier New')->display(); 

  5. #5
    HEXUS webmaster Steve's Avatar
    Join Date
    Nov 2003
    Posts
    14,276
    Thanks
    292
    Thanked
    837 times in 473 posts

    Re: Styling the parent of a visited link

    Best I can do right now is something like this (using ExtJS to query the dom although you could use any other method to poke at the selectors).
    Code:
    var els = Ext.query('#selectors .you have');
    var i = 0;
    for (i in els)
    {
    	var a = Ext.query('more selectors',els[i])[0];
    	if (a)
    	{
    		if (a.currentStyle)
    		{
    			if (a.currentStyle.color == '#xxxxxx')
    			{
    				els[i].className += ' visited';
    			}
    		}
    		else
    		{
    			var style = document.defaultView.getComputedStyle( a, null );
    			if (style)
    			{
    				if (style.color == 'rgb(ddd, ddd, ddd)')
    				{
    					els[i].className += ' visited';
    				}
    			}
    		}
    	}
    }
    Works in IE, FF and Opera, where you've set through the CSS the color of a:visited (using appropriate selector scope) to #xxxxxx.

    Hacked this about so it did what I want.
    PHP Code:
    $s = new signature();
    $s->sarcasm()->intellect()->font('Courier New')->display(); 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. The Link.
    By blockers in forum General Discussion
    Replies: 2
    Last Post: 11-06-2004, 06:08 PM
  2. Forums link on front page
    By DsW in forum HEXUS Suggestions
    Replies: 9
    Last Post: 26-03-2004, 09:10 AM
  3. Arghhh City Link!
    By Basher in forum General Discussion
    Replies: 3
    Last Post: 11-03-2004, 01:46 PM
  4. Page number link in threads.
    By Trash Man in forum HEXUS Suggestions
    Replies: 0
    Last Post: 10-10-2003, 04:36 PM
  5. Avatar = link
    By Dr. X in forum HEXUS Suggestions
    Replies: 0
    Last Post: 23-08-2003, 06:49 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •