Reputation: 26
I have a small peice of HTML code in which when I use CSS for identifying elements, it fails while XPath is working fine on it.
I am using CSS identifier as "div#chart_1 div svg g.highcharts-button:nth-child(1)" which is not working while the XPath works correctly.
HTML
<!DOCTYPE html>
<html>
<body>
<div id="overview-layout">
<div id="overview-body">
<div class="" id="overview-tabcontent-container">
<div data-highcharts-chart="7" class="chart" id="chart_1">
<div id="highcharts-26" class="highcharts-container">
<svg height="304" width="1154" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect zIndex="1"></rect>
<path zIndex="2"></path>
<g transform="translate(73,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.483333110809326">
<tspan x="7.483333110809326">1h</tspan>
</text>
</g>
<g transform="translate(103,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.483333110809326">
<tspan x="7.483333110809326">4h</tspan>
</text>
</g>
<g transform="translate(133,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.483333110809326">
<tspan x="7.483333110809326">8h</tspan>
</text>
</g>
<g transform="translate(163,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button">
<rect stroke-width="1" stroke="#68A" height="18" width="30" y="0.5" x="0.5" fill="url()" ry="0" rx="0"></rect>
<text zIndex="1" y="14" x="7.391666889190674">
<tspan x="7.391666889190674">All</tspan>
</text>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 0
Views: 1071
Reputation: 3235
Your css is wrong, your element is the third child of parent svg, so if you want to check for following element.
g transform="translate(73,0)" style="cursor:default;text-align:center;" zIndex="7" class="highcharts-button"
you need to modify your css to:
div#chart_1 div svg g.highcharts-button:nth-child(3)
Upvotes: 1
Reputation: 101778
The definition for :nth-child
is:
The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.
You have g.highcharts-button:nth-child(1)
, which would select a g.highcharts-button
that is the 1st child of its parent element, but there is no such element in your HTML. The 1st child of the svg
element is a rect
.
I suggest trying :nth-of-type
. It is defined as:
The :nth-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element.
So you can do:
div#chart_1 div svg g.highcharts-button:nth-of-type(1)
Note that this is not a perfect solution, because nth-of-type
only takes the element type into account, and not the class
es. If your .highcharts-button
element is not the first g
under its parent, then the above selector can still end up selecting nothing.
Upvotes: 2