A:visited not working

Ionic Framework ionic-v3
1

I want to use :visited css pseudo class in my Ionic 2 project. But it doesn’t seem to be working.

a.item:visited { color: red !important; }

I also tried

a:visited { color: red !important; }

both of these are not working.

I’ve a list of items on homepage, and I want to change the color of item which I’ve visited.

Is it because we are using (click) instead of href to navigate ??
If so, how can we solve this?

2

Hi, it seems to work for me… Can you show your html of the item please.

3

Sure, here is my code

<ion-list *ngIf="fruits.length > 0" no-lines> <a *ngFor="let fruit of fruits" (click)="load(fruit.color, fruit.name);" ion-item detail-push text-wrap> {{fruit.name}} </a> </ion-list>

4

try this

a, .ion-label:visited {
  color: red !important;
}
5

Still not working :frowning:
Is it because we are not using href to navigate??

6

Yes this will not work in ionic since we’re not using traditional links/hrefs

7

Is there any other way we can achieve it then?

8

@technotip, what are you trying to achieve exactly? Do you want to style your list item in a certain way forever after it has been visited?

Or do you just want your list item to be styled while you have that link activated? If so then this might help you.

9

In Ionic 1 we could simply make visited links(within our own app and not external links) to be displayed in different color than the normal(not visited) links. I want to achieve the same in Ionic 2. But we’re not using href for navigation, so am not finding way to achieve this :frowning:

10

I see. Well the easiest way would be to create your own function and apply a class when that function is called. Ionic 2 have a class built in: .activated. You can apply this class to your CSS rules to mimic the :active pseudo-class but again this wouldn’t achieve what you require.

I guess you should try creating your own function using openPage and then using an if statement to check if openPage has been called. That way you could apply a style if an element is selected without it disappearing when the resulting page is closed from the stack.

If I have time I’ll try to mock up an example for you.

11

I tried many things, but not yet able to figure out the solution for this :frowning:
I think this is something Ionic Team should think about - as its something very important for most of the apps.

Kindly let me know once you come up with a mock up of the code …meanwhile I’ll keep trying whatever I can. Thank you

12

Right so I managed to do this. First I made a function in page.ts:

visitedPage: any;

Then I used openPage to set visitedPage to ‘true’ if a page is opened:

openPage(page) {
  this.visitedPage = true;
}

Then I append a class (in this case ‘.test3-open’) to this function in my HTML:

<button ion-item [class.test3-open]="visitedPage" (click)="openPage(TestPage)">test</button>

As you can see, I have my button opening a page called TestPage in my app which I imported and defined in my page.ts.

I then added to my page.scss:

.test3-open { background: #000; }

And my button turned black after I clicked on it and remained black even if I moved to another page thereafter.