Can I get specific "dl" i.e. at First or Second index out of many identified by a CSS Selector in my App - selenium

Question

I'm trying to automate a functionality using selenium in my Application Chrome browser. It's an SVG graph based page and shows details upon mouse over it. And this is identifiable with a CSS selector which is returning more than one matching elements(i.e. 6-7 dl , these dls has few child tags then internally containing the values I need to verify -as attached), now my need to select them one by one at a time and verify text of them(which displayed on mouse over).
I got to know on google how to read nth-child from dl but not getting a way to select particular dl at first place.
For example-
my selector is: .d3-tip.n>dl
if I use -.d3-tip.n>dl>dt:nth-child(odd): its giving me all the attributes of dt.. ie 6 values but I nedd values only from fst dl.
Similarly.d3-tip.n>dl>dd:nth-child(even) returning the 6 values of respected dds..
In Actual my app has only one dl (on UI) but don't know why it displaying 6 in DOM...
Plz refer attachment and HTML for a clear understanding of DOM
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<--! and so on up to 6 blocks of dl

Answer 1

nth-child is to find the nth-child of any immediate parent element. In your HTML DOM, dd is single child element of each div.d3-tip element. The repetitive child is actually your div.d3tip for it immediate parent element
So your selector has to be written as below to get the first set of dd,
div.d3-tip:nth-child(1)>dl>dd
Getting the second selector also works. This is most important while writing css selector. The second nth has to work. :).

Answer 2

Ok, so I am not sure which of the elements you want...
So... here is a snip that should give you help.
A) with hovering.
B) with looping through the elements.
C) Bonus learn about contains() functionality of XPath...
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.action_chains import ActionChains
url = "http://your_url"
path_to_chromedriver = "C:\path_to_chromedriver"
chrome_options = Options()
#chrome_options.add_argument("--headless")
chrome_options.add_argument("--start-maximized")
browser = webdriver.Chrome(executable_path=path_to_chromedriver,
chrome_options=chrome_options)
browser.get(url)
# list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dt")
list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[class='d3-tip n']//dl/dt")
list_of_dd_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dd")
hover = ActionChains(browser).move_to_element(list_of_dt_elements_to_hover[0])
hover.perform()
for dd_ele in list_of_dt_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
for dd_ele in list_of_dd_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
I hope you find this helpful!