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()"]

Answer 1

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

Answer 2

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.

Answer 3

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;
}