ansaurus

Question

Answer 1

+1 A:

Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:

$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });

ceejayoz 2010-06-29 19:35:07

Huh.Why every time somebody ask question related to html ,javascript etc ie client side... solution is Jquery. Question is not tagged with javascript nor with Jquery..I know you cant do this with css only but Jquery is not the solution.

piemesons 2010-06-29 19:36:56

jQuery is being used here as an /example/ only. That said, in a large percentage of practical situations jQuery is a very, very good choice. The example here is very well suited to jQuery.

Jon Cram 2010-06-29 19:45:22

This solution could be good, but like that you prevent the click on all span inside a tag... and title span needs to be clear for click event!

Zuul 2010-06-29 19:51:39

@Zuul As @Jon Cram stated, this is example code. He'd need to `class` the description `span` and target it specifically.

ceejayoz 2010-06-29 19:53:36

@piemesons Those of us who work in jQuery tend to give examples in jQuery because it's a lot easier than the absurdities non-frameworked JS requires you to go through.

ceejayoz 2010-06-29 19:54:33

@ceejayoz, Yes... correct, but a working example would help Shamik better ;)

Zuul 2010-06-29 20:00:56

@Zuul Not if he wants to learn instead of copy/pasting. :-)

ceejayoz 2010-06-29 20:24:21

@ceejayoz, ok, ok...ok! ;)

Zuul 2010-06-29 20:32:58

@piemesons I provided a vanilla example.

NateDSaint 2010-06-29 20:57:11

@all Jquery fans.. I am not against of Jquery.@ceejayoz But you have to pay a cost for that ie 70kb for minified version of Jquery thats way you cant go for the Jquery solution everytime. You are thinking from developer's point of view.. Try to think from user point of view.

piemesons 2010-06-29 21:44:14

70kb once, if you set your server up right, and potentially not even once if you use Google's hosted version.

ceejayoz 2010-06-29 21:51:30

Also, it's 24KB minified and gzipped, according to jQuery.com.

ceejayoz 2010-06-29 22:16:42

Answer 2

+3 A:

CSS is used for applying styling i.e. the visual aspects of an interface.

That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.

You cannot achieve what you want using only CSS.

JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.

Jon Cram 2010-06-29 19:36:53

Thank you for the detailed information. Now I will never forget where to use CSS and where to look for javascript :)

Shamik 2010-06-29 22:33:39

Answer 3

A:

CSS relates to visual styling and not behaviour, so the answer is no really.

You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.

Even better, change your markup so that it reflects what you want it to do.

FinnNk 2010-06-29 19:38:02

Answer 4

+4 A:

Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:

<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com"&gt;
  <span>title<br></span>
  <span onclick='return false;'>description<br></span>
  <span>some url</span>
</a>
</div>
</body>
</html>

You can then style it so that it looks un-clickable too:

<html>
<head>
     <style type='text/css'>
     a span.unclickable  { text-decoration: none; }
     a span.unclickable:hover { cursor: default; }
     </style>
</head>
<body>
<div>
<a href="http://www.google.com"&gt;
  <span>title<br></span>
  <span class='unclickable' onclick='return false;'>description<br></span>
  <span>some url</span>
</a>
</div>
</body>
</html>

Elf King 2010-06-29 19:44:10

Thanks for this feedback. On hover, the cursor is not changing to default *it stays as hand*, any idea how to fix that?

Shamik 2010-06-29 21:27:37

http://www.echoecho.com/csscursors.htm :-)

Elf King 2010-06-29 22:02:19

Answer 5

+1 A:

In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):

Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.

a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
  a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}

This will disable the click on every 2nd span inside of an a tag. You could also check the innerHTML of each span for "description", or set an attribute or class and check that.

NateDSaint 2010-06-29 20:54:26

+1 for this solution.Love u..:-)

piemesons 2010-06-29 21:44:49

ansaurus

tags:

views:

answers:

Use CSS to make a span not clickable

related questions