CODEWITHSUNDEEP
htmlcss
Brainchild
Brainchild

Reputation: 1874

Anchor tag inside span

I have an anchor tag <a> inside a <span> tag. I have applied CSS so that span looks like a button.

I am facing some issues:

  1. I cannot apply styles to anchor by applying style to span.
  2. The click is happening only on the anchor tag. I would like the click feature for the entire span tag.

Any help greatly appreciated.

Upvotes: 0

Views: 9507

Answers (4)

eCSSpert
eCSSpert

Reputation: 1

If you put the span inside the a, then you should fix your target area issue. Plus anchor tags have some build in browser styles, so what why things like text-decoration are not passing grom span to a

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92903

1) Add styles to the span, and also to the anchor inside the span:

#container span, #container span a {
    /* whatever */
}

2) You can't apply click events to a span tag without JavaScript. I suggest jQuery for ease:

$('#container').on('click', 'span', function() {
    // JavaScript functionality here
});

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

A span is not "clickable" by default in the sense an anchor is, so either you will have to use JavaScript to make the span clickable. Or I guess you can apply a margin to you anchor, so that it "covers" the entire span - thus create the impression that the span element is clickable.

Not sure why you need the span though? I would probably get rid of the span all together and apply the span-styling to the anchor instead.

Upvotes: 0

quzary
quzary

Reputation: 285

Could you give any code example? If anchor is the only content of the span then you could just delete the span and apply the style directly to the anchor.

Upvotes: 0

Related Questions