cancel
Showing results for 
Search instead for 
Did you mean: 

CSS selection of the first column

OzanCavusoglu
Explorer
0 Kudos

Hi everyone,

I tried to use Mustafa Bensan's CSS approach using rect element and it worked as it did in the past.

I noticed that all columns of DE is blue after the CSS, the thing I'm looking for is just a one step away. I only want the first column in blue as below.

In order to do that I need to be able to select only the first column in CSS. I find that all originally red columns (MOB columns) have everything same but their data-id and data-datapoint-id numbers highlighted in green above. I'm trying to select only the column with data-id = 0 and data-datapoint-id = 1 but couldn't succeed yet.

So far what I have is this.

/*chartColumn1 is the class I use for my InfoChart*/

.chartColumn1 g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-groupg.v-datapoint:NTH-CHILD(2) rect{

fill: #0000ff; !important;

}

And code below doesn't work in my case.

g[data-id="0"][data-datapoint-id]="1"{

fill: #0000ff; !important;

}

Does anyone know how to only select the chartColumn1 class' g element's column with data-id=0 and data-data-point-id=1?

Best regards,

Ozan

Accepted Solutions (1)

Accepted Solutions (1)

Former Member

It seems I posted incorrect code earlier. It should be:

g[data-id="0"][data-datapoint-id="1"] rect{ /*moved the ] to the end and added the rect to select the actual rectangle*/

   fill:#0000ff !important; /* removed the extra semicolon before the !important */

}

I tested this and it works.

Answers (1)

Answers (1)

OzanCavusoglu
Explorer
0 Kudos

Thank you Nikolaus, that also worked in my case!

Best regards,

Ozan

Former Member
0 Kudos

Hi Ozan,

I'm having same issue. Quick question, where did you add the code above for g[data-id="0"][data-datapoint-id="1"] . Can you share some more details of your solution?

Thanks,

Luis