Is it possible to create custom CSS pseudo-classes?

Question

I am thinking of an alternative to JavaScript in case it's manually disabled by the user, so that instead of prompting them to enabled it, I could, for instance, in some way simulate the click event and change, for instance, the background colour by creating my own :click pseudo-class, just like it works for :hover.

Is such a scenario possible? Is it possible for one to create their own css pseudo-classes that?

Possible duplicate of [Can I have an onclick effect in CSS?](http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) — Joe Thomas, May 29 '16 at 08:16

score 6 · Accepted Answer · edited Dec 24 '21 at 19:27

6

If your question is, can I create a custom pseudo, example;

div:my-custom-pseudo { }

Then not without some JavaScript libraries.

Tutorial on using it with mooTools and slick

Personally, I haven't used this, so I don't know browser support and this is pretty much the only resource I ever found on custom pseudo classes.

Edit:

So pretty much, no, you can't do what you want, as you will always need JavaScript to do what you want.

edited Dec 24 '21 at 19:27

Eliran Malka

15,821
6
77
100

answered May 29 '16 at 08:17

Mark

2,061
1
16
26

Thanks for your answer @Mark. I am going to check it out. – Angel Politis May 29 '16 at 08:26
Some solution in `vanilla JS` without `moTools` or `jQuery`? – Adrian Preuss Mar 03 '18 at 09:11

score 4 · Answer 2 · edited Jan 05 '17 at 01:32

4

Creating pseudo-classes is not possible and if you can simulate that also on some browser, then it would likely not work on others.

For that simple reason, all :first-child and :last-child polyfills/fallbacks were done by using class names rather than trying to make pseudo-class work.

edited Jan 05 '17 at 01:32

Angel Politis

10,955
14
48
66

answered May 29 '16 at 08:30

David Chelliah

1,319
1
13
24

Thanks for you answer @David. – Angel Politis May 29 '16 at 08:32

score 1 · Answer 3 · edited Aug 07 '16 at 12:36

1

You can use :active pseudo class. If I understand you properly.

edited Aug 07 '16 at 12:36

Angel Politis

10,955
14
48
66

answered May 29 '16 at 08:05

Sergey Khalitov

987
7
17

2

The :active pseudo-class requires that an element be held. This does not simulate the click event. My question is if it is possible to create a pseudo-class, not use an existing one. – Angel Politis May 29 '16 at 08:07
1

Ok, now i understand you. You can make pseudo classes only with JavaScript library, but in your case it's disabled. – Sergey Khalitov May 29 '16 at 08:21
Fair enough @SergeyKhalitov. – Angel Politis May 29 '16 at 08:24

score 0 · Answer 4 · answered Jan 18 '21 at 18:43

0

Custom State Pseudo Classes may indeed be available in the future (for Custom Elements).

answered Jan 18 '21 at 18:43

Null

975
13
13

Is it possible to create custom CSS pseudo-classes?

4 Answers4