Skip to Content

CSS selection of the first column

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

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

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 16, 2017 at 03:17 PM

    Thank you Nikolaus, that also worked in my case!

    Best regards,

    Ozan

    Add comment
    10|10000 characters needed 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