TestRaptor TestRaptor - 2 months ago 10
HTML Question

Use CSS to target an element that has a duplicate class

In my HTML, I have 2 lines that have the same class. I want to be able to target just the first element, but can't seem to figure it out. I am able to target both elements, but when I change the CSS to select the first child, it doesn't return anything.

Here is the CSS and the duplicate classes
enter image description here

If I use

svg g.highcharts-axis-labels
, it will select both elements.

I tried selecting the first child like below, but its not returning any elements with that CSS.

svg g.highcharts-axis-labels:nth-child(1)


Can someone point out the mistake I am making.

Answer

You want nth-of-type pseudo-class:

.highcharts-axis-labels:nth-of-type(2) {

}

http://www.w3schools.com/cssref/sel_nth-of-type.asp

Comments