[CSS3] :target Tutorial

MFSP · #1 04-08-2007, 12:21 PM

There's an interesting new method I discovered to highlight a portion of text when a user clicks on a link. It's based entirely off CSS and the :target selector, which, unfortunately, was first introduced in a CSS3 specification and thus very few browsers support it. However, the way it works degrades somewhat well in older browsers, because it will jump them to the portion of text you want them to read, even if it won't highlight it. As far as I know, right now this only works in Firefox and Safari.

First, you have an anchor to somewhere in your webpage, like this:

HTML Code:

<p>Click on <a href="#linktostuff">this link</a>.</p>
.
.
.
.
<ul>
<li id="linktostuff">Very Important Stuff<li>
</ul>

Then, merely add the following to the head of your page or to your external stylesheet:

HTML Code:

<style type="text/css">
:target {
background: #ffff7e;
}
</style>

And that's it! In older browsers, the link will just move their view to where you want them to look, but in newer standards-compliant browsers users will see the text highlighted. The :target selector should soon become more widespread as CSS3 is fully introduced.

You can see an example of this right here.

Nile · #2 04-08-2007, 12:25 PM

lol!
Thats pretty cool!
Always wanted to know how to do that!
+rep!

BBarash · #3 04-08-2007, 12:28 PM

Hey, Ive never seen this before. Pretty sweet.

techietim · #4 04-08-2007, 12:34 PM

Of course, I have to come up with my own method

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Hello!</title>
  <style type="text/css">
  body{
    width: 500px;
  }
  </style>
  <script language="JavaScript" type="text/javascript">
  function highl(a){
    document.getElementById(a).style.background = "#FFFFBF";
    document.getElementById(a).style.padding = "5px";
  }
  </script>
</head>
<body>
<p><a href="#hi" onclick="highl('hi');">go</a></p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed arcu. Duis at erat sed tellus convallis molestie. Vestibulum aliquam. Nulla quis erat. Sed et purus id purus cursus viverra. Integer tincidunt, pede a pharetra varius, dui purus imperdiet nulla, feugiat condimentum nisi nulla at nulla. Mauris vitae orci. Sed pede erat, consectetuer quis, porta vel, porta eu, nibh. Integer non lorem nec nunc ultricies euismod. Cras consectetuer dolor eu diam. Morbi semper scelerisque metus. Nullam ultricies dui eu enim. In hac habitasse platea dictumst. Morbi lorem erat, posuere non, vehicula ut, iaculis dignissim, leo. Nunc fringilla pede vel dolor. Nunc lacinia, eros eget adipiscing condimentum, justo orci fermentum arcu, euismod tincidunt nunc nisi ut sem.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo dolor, cursus a, pharetra vel, consequat in, ipsum. Aenean neque risus, facilisis ut, molestie a, viverra ac, lacus. Cras rutrum tempor tellus. Sed eget nunc. Aliquam pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mollis semper quam. Aliquam volutpat urna non dolor. Proin turpis erat, bibendum sed, vulputate in, placerat ac, augue. In in urna. Nam neque arcu, elementum non, tempus ac, luctus non, nibh. Quisque sem sem, commodo sit amet, iaculis non, elementum vel, quam. Pellentesque vel dolor non felis tincidunt sollicitudin. Phasellus a elit eu mi accumsan tristique. Donec pretium tortor vel urna. Integer lectus velit, commodo sit amet, semper vestibulum, feugiat at, arcu. Phasellus vel magna.
</p>
<p>
Sed consequat quam sit amet ante. Aenean feugiat, sem nec scelerisque luctus, orci enim cursus neque, a luctus tellus tellus euismod velit. Aliquam sed erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultricies nisl quis pede. Suspendisse sem eros, viverra nonummy, pretium id, varius vitae, ipsum. Duis nibh leo, vulputate quis, egestas ac, porta sit amet, lacus. Nulla facilisi. Sed turpis ligula, pulvinar tincidunt, feugiat eget, iaculis nec, felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam metus risus, faucibus aliquam, congue ut, consectetuer sit amet, odio. Donec pretium ante sit amet sapien. Praesent eu turpis. Maecenas ipsum. Suspendisse scelerisque nisi ut ipsum. Cras lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst.
</p>
<p>
Donec dignissim, tortor sit amet elementum varius, justo elit sodales est, eget bibendum justo erat nec elit. Praesent porttitor, risus non dapibus mattis, ligula sem congue pede, pretium blandit leo pede sit amet justo. Fusce eu turpis. <span id="hi">Maecenas ullamcorper. Suspendisse potenti.</span> Donec quis pede vel odio eleifend adipiscing. Donec felis. Praesent massa ante, feugiat eu, faucibus sed, porta volutpat, sem. Duis vel felis. Suspendisse sit amet lacus vel mauris ornare mollis. Integer lacinia felis vitae quam. Maecenas volutpat placerat mi. Quisque lorem leo, tempor ut, hendrerit a, tristique dictum, ligula.
</p>
</body>
</html>

DEMO

BBarash · #5 04-08-2007, 12:35 PM

Even coolier! Nice one.

MFSP · #6 04-08-2007, 12:36 PM

Quote:

Originally Posted by techietim

Of course, I have to come up with my own method

The advantage of my method is that it will work even with javascript disabled, since it's pure CSS.

techietim · #7 04-08-2007, 12:37 PM

True, but having JavaScript disabled is less likely then having a non CSS3 compliant browser.

MFSP · #8 04-08-2007, 12:42 PM

Quote:

Originally Posted by techietim

True, but having JavaScript disabled is less likely then having a non CSS3 compliant browser.

Well, that will change in a few months. In the meantime, perhaps

HTML Code:

<style type="text/css"> :target { background: #ffff7e; } </style>
<!--[if IE]>
  <script language="JavaScript" type="text/javascript">
  function highl(a){
    document.getElementById(a).style.background = "#ffff7e";
    document.getElementById(a).style.padding = "5px";
  }
  </script>
<![endif]-->

IE will ignore the CSS that it dosen't know, but see the javascript and use that. Firefox and Safari will ignore the javascript, and use the CSS.

Nile · #9 04-08-2007, 12:45 PM

Hey!
I thought that when you highlighted a word you got tp choose the color of the highlightation, but how did you get it so when you highlighted the word it would become your color that you wanted it to become?

MFSP · #10 04-08-2007, 12:47 PM

Quote:

Originally Posted by Nile55

Hey!
I thought that when you highlighted a word you got tp choose the color of the highlightation, but how did you get it so when you highlighted the word it would become your color that you wanted it to become?

You just change the color value in the :target CSS or javascript to whatever color you want. What you're really doing is changing the background color on the linked object, not actually 'highlighting' the text.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode