Is it possible in my css file to do something like that?:
.myclass:after{
content:"click me";
onclick:"my_function()";
}
I want to add after all instances of myclass a clickable text, in the css style sheet.
-
1If it is not possible, that's the answer I was looking for. I know how to do that with jQuery.Oli– Oli2011-11-28 19:54:40 +00:00Commented Nov 28, 2011 at 19:54
-
1Check this answer: stackoverflow.com/a/23243996/1136132joseantgv– joseantgv2016-07-19 10:12:14 +00:00Commented Jul 19, 2016 at 10:12
Add a comment
|
4 Answers
Is it possible in my css file to do something like [see code above]?
No
The important question to ask is why.
HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.
CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.
JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.
Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.
CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.
If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.
jQuery makes this very simple:
$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);
3 Comments
wayofthefuture
you, my friend, are truly an artist
purefusion
If click events on pseudo elements were possible, it'd be handy when you need a button to show only within the last element. In a form with clonable rows of fields/fieldsets, an absolute positioned pseudo [+] button, right-aligned & matching the height of the row, could appear within the last row, rather than after/under it:
div.field-row:last-of-type:after {} ...then you wouldn't have to worry about jQuery needing to keep track of the element and constantly moving it to the last row whenever new rows are added, especially if the button must match the height of its containing row without JS.
clord
I want to do this so I can register a click handler on
::backdrop of dialog without using client bounds of that modal.Well,
using expression it might actually be possible for internet explorer only.
Otherwise:
No. Not at all, that's not what css is made and intended for.
Comments
If something can be done with jQuery, then it is sure that it is possible to do it without that. Lets see a data model:
<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>
We need some stylesheet:
<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>
And a code:
<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");}; }
</script>
Comments
Use jQuery's After:
1 Comment
zzzzBov
:after (CSS) adds the pseudo-element within the selected elements, .after() (jQuery) adds the new element immediately after the selected elements. .append would be the correct equivalent.