CODEWITHSUNDEEP
css
Ilhem Nemri
Ilhem Nemri

Reputation: 181

2 pseudo selectors didn't work respectively in CSS #id:after:active{}

I need to click on the car wheel , so the car advance 100px ,, the wheel in this case is "after" , but the transition is not working with ":after:active" selectors but it does with other selectors . how can I correct this ?

PS: I'm using chrome.

#Car{
height: 30%;
width: 30%;
background-color: blue;
position:relative;
bottom:20%;
left: 30%;
top:-40%;
border-top-right-radius : 20% 30%;
border-bottom-right-radius : 20% 30%;}

 #Car:after{
 content:"";
 height: 50%;
 width: 20%;
 position: absolute;
 left: 50%;
 top:90%;
 border-radius: 50%;
 background: #cc7b0f;
 border: 10px solid grey;
 z-index:6;
 }

 #Car:after:active{
 transform: translate(100px, 0px);
 transition:ease-in-out;
 }

Upvotes: 0

Views: 36

Answers (2)

godblessstrawberry
godblessstrawberry

Reputation: 5048

what means your selector Car:after:active is

:after element that is :active should have rules{*translate*}

but what you need here is

#Car that is :active has :after element which should have rules{*translate*}

so you should change your selector to

#Car:active:after

Upvotes: 1

Serg Chernata
Serg Chernata

Reputation: 12400

Pseudo elements must come last, ie:

#Car:active:after

https://jsfiddle.net/s1krLby1/

Upvotes: 1

Related Questions