CSS Selector on onclick function

Question

Is there a way to get a CSS selector on a onclick + function()? You can get it on the onclick.

Here is the HTML:

<span onclick="gotoURL(&quot;https://youtu.be/dQw4w9WgXcQ&quot;);">Rick Roll</span>

CSS:

span[onclick] {
    color: blue;
    text-decoration: underline;
}

But these don't work:

span[onclick="gotoURL"]

span[onclick="gotoURL()"]

I'm gonne test this for a bit, but on first glance it works like a charm. — Flummox - don't be evil SE, Mar 17 '17 at 10:57

score 11 · Accepted Answer · edited Mar 17 '17 at 11:15

11

sure there is a way ;)

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

span[onclick^=gotoURL]

Means grab span with attribute onclick which's value is starting with gotoURL.

https://jsfiddle.net/h0qg6nys/

Cheerio :)

edit: vivekkupadhyay was faster...

edit 2: btw. you can check this for selector references https://www.w3schools.com/cssref/css_selectors.asp

edit 3: 30-css-selectors-you-must-memorize

edited Mar 17 '17 at 11:15

vivekkupadhyay

2,851
1
22
35

answered Mar 17 '17 at 10:57

MarcelD

393
1
9

2

Yeah, but they couldn't be bothered to explain it, let alone post a full-fledged answer. So you get the vote. – BoltClock Mar 17 '17 at 11:00
2

Wasn't actually thinking he needs that *selector* solution, btw nice explaination :) – vivekkupadhyay Mar 17 '17 at 11:15
you trying to Rick Roll stackoverflow – Neeleshwar Kumar Oct 07 '21 at 17:10

Manngo · Answer 2 · 2020-10-16T22:45:00.210

Just clarifying what is happening with the attribute selector.

span[onclick] selects a span which has an onclick attribute, regardless of its value.
span[onclick="…"] selects a span whose onclick value exactly matches something. That was your error: it didn’t match exactly
span[onclick^="…"] selects a span whose onclick value begins with something. That is closer to what you were looking for.

The double quotes around the something aren’t always required, but you do need them if the something contains awkward characters such as slashes. It’s always safe to include them.

Modern CSS also includes $= which ends with a value, and *= which contains a value. This is not available in Legacy Browsers (ie IE).

CSS is not sophisticated enough (yet) to include more interesting pattern matches, so although you can look for gotoURL (span[onclick]^=gotoURL), there is no way to match gotoURL().

Just as a side point, you really shouldn’t be using the onclick property anyway. It’s only there for people who haven’t heard of unobtrusive JavaScript.

score 1 · Answer 3 · answered Mar 17 '17 at 10:55

1

Shouldn't you add styling for focus maybe? It may work then. Or for an active as well.

span:focus,
span:active{
    color: blue;
    text-decoration: underline;
}

answered Mar 17 '17 at 10:55

Kuba Wojtach

541
3
10

CSS Selector on onclick function

3 Answers3

Linked