Skip to Content
0

CSS selection of the first column

Feb 15, 2017 at 02:34 PM

146

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Best Answer
avatar image
Former Member Feb 15, 2017 at 03:59 PM
1

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.

Share
10 |10000 characters needed characters left characters exceeded
Ozan Cavusoglu Feb 16, 2017 at 03:17 PM
0

Thank you Nikolaus, that also worked in my case!

Best regards,

Ozan

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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

0