Table Selection with a Link in the Row

I’m using Chameleon-Blue Theme and it uses Blue to show that a row is selected. This is good and looks nice but unfortunately my Link’s text is blue also.

So whenever the row is selected, I can’t read the Link’s text because it blends in.

My Work around is to keep track of the rows selected and in the ValueChangeListener I make my Link’s text White. And when ever it is unselected I remove the White Style off that link. This works, causes a little flicker, but works.

My question is: Is there a cleaner way to do this with CSS only for Link’s? My Label’s are able to change their text to White and Back no problem.


Try something like:

.v-table tr .v-table-cell-content a{
 color:blue; /* color of the link on unselected rows */

.v-table tr.v-selected .v-table-cell-content a{
 color:white; /* color of the link on selected rows */

You may also need to set a:hover (mouse hover a link) and a:visited (link which has already been clicked on)

Thanks Mathias,

I couldn’t get to work what you suggested, but you got me thinking… I was able to add a style “tablelink” to my Link and use:

/* Change the link to White when selected in a table row */
.v-table tr.v-selected .v-link-tablelink,
.v-table tr.v-selected .v-link-tablelink:focus,
.v-table tr.v-selected .v-link-tablelink:active,
.v-table tr.v-selected .v-link-tablelink span,
.v-table tr.v-selected .v-disabled.v-link-tablelink,
.v-table tr.v-selected .v-disabled.v-link-tablelink:focus,
.v-table tr.v-selected .v-disabled.v-link-tablelink span {

Didn’t have to do anything when the row is not selected.

It works and much much cleaner than the way I did have it.