CSS dt 元素下所有 dd 元素的选择器

Question

Problem

Is it possible to grab all dd elements under a specific dt element?

Specifically, I am trying to capture the dd elements under the dt element titled ' Life Cycle ' on this page: https://plants.ces.ncsu.edu/plants/abeliophyllum-distichum/

I want to capture ' Life Cycle ' for other plant pages too, where they could have 1 or more dd elements under the dt for ' Life Cycle '. So I need a CSS selector that could work for the scenario of 1 or more dd elements.

Here is what the HTML structure looks like:

<dl>
    <span>Attributes:</span>
        <dt>Life Cycle:</dt>
            <dd><span>Perennial</span></dd>
            <dd><span>Woody</span></dd>
        <dt>Text:</dt>
                <dd><span>Text</span></dd>
        <dt>Text:</dt>
                <dd><span>Text</span></dd>
       <dt>Text:</dt>
       <dd><span>Text</span></dd>
       <dd><span>Text</span></dd>
</dl>

What I've tried

1. dt:contains('Life Cycle:') + dd

This only returns the first dd element

2. dt:contains('Life Cycle:') ~ dd

This returns all of the dd elements after the dt even dd s under other dt s.

3. I wish I could use n-child like dt:contains('Life Cycle:'):nth-child(-n+2) , but I can't because dd elements aren't children of dt s.

What I need

I need something that is flexible for the scenario of having 1 or more dd elements under one dt . I am not able to modify the HTML, because I am scraping this data point from the website.

This is what I am trying to capture in my CSS selector:

Answer 1

Looks :contains css selecter only works in Selenium. In that case, you need something similar to :not , you can do the following:

dt:contains('Life Cycle:') ~ dd {
  color: red;
}

dt:contains('Life Cycle:') ~ dt ~ dd {
  color: black;
}

Edit: If you can't use css or xpath, then in jquery you can do the following:

$("dt:contains('Life Cycle:') ~ dd").css("color", "red");
$("dt:contains('Life Cycle:') ~ dt ~ dd").css("color", "black");