Use CSS to make a span not clickable

Question

lt html gt       lt head gt       lt  head gt       lt body gt           lt div gt               lt a href  http   www google com  gt                   lt span gt title lt br gt  lt  span gt                   lt span gt description lt br gt  lt  span gt                   lt span gt some url lt  span gt               lt  a gt           lt  div gt       lt  body gt   lt  html gt    I am pretty new to CSS  I have a simple case like the above  I would like to make the  title  and  some url  clickable but want to make description as non-clickable  Is there any way to do that by applying some CSS on the span so that whatever inside that span  it is not clickable  My constraint is that  I do not want to change the structure of the div  instead just applying css can we make a span which is inside an anchor tag  not clickable

User · Answer

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

User · Answer

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

User · Answer

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    lt html gt   lt head gt   lt  head gt   lt body gt   lt div gt   lt a href  http   www google com  gt     lt span gt title lt br gt  lt  span gt     lt span onclick  return false   gt description lt br gt  lt  span gt     lt span gt some url lt  span gt   lt  a gt   lt  div gt   lt  body gt   lt  html gt    You can then style it so that it looks un-clickable too    lt html gt   lt head gt        lt style type  text css  gt       a span unclickable    text-decoration  none         a span unclickable hover   cursor  default          lt  style gt   lt  head gt   lt body gt   lt div gt   lt a href  http   www google com  gt     lt span gt title lt br gt  lt  span gt     lt span class  unclickable  onclick  return false   gt description lt br gt  lt  span gt     lt span gt some url lt  span gt   lt  a gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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  lt  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

User · Answer

Yes you can     you can place something on top of the link element    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Yes you CAN lt  title gt       lt style type  text css  gt          ul              width  500px              border  5px solid black                      product-type-simple               position  relative              height  150px              width  150px                     product-type-simple before              position  absolute              height  100                width  100                content                  background  green   for debugging purposes   remove this if you want to see whats behind             z-index  999999999999                 lt  style gt   lt  head gt   lt body gt   lt ul gt       lt li class  product-type-simple  gt           lt a href   link1  gt               lt img src  http   placehold it 150x150  gt           lt  a gt       lt  li gt       lt li class  product-type-simple  gt           lt a href   link2  gt               lt img src  http   placehold it 150x150  gt           lt  a gt       lt  li gt   lt  ul gt   lt  body gt   lt  html gt    the magic sauce happens at product-type-simple before class Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple    then you increase its z-index to make sure it will place it self on top of the content of product-type-simple  You can toggle the background color if you want to see whats going on    here is an example of the code https   jsfiddle net 92qky63j

User · Answer

Actually  you can achieve this via CSS  There s an almost unknown css rule named pointer-events  The a element will still be clickable but your description span won t   a span description       pointer-events  none      there are other values like  all  stroke  painted  etc   ref  http   robertnyman com 2010 03 22 css-pointer-events-to-allow-clicks-on-underlying-elements   UPDATE  As of 2016  all browsers now accept it  http   caniuse com  search pointer-events

[css] Use CSS to make a span not clickable

Examples related to css