JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <dl>
        <dt>term 1</dt>
            <dd>def 1a</dd>
            <dd>def 1b</dd>
        </dl>
        <ul>
            <li>term 1</li>     
            <li>term 2</li>                  
        </ul>
        <ol>
            <li>term 1</li>  
            <li>term 2</li>              
        </ol>
        
    </body>
</html>

CSS

/* DD & DT elements ARE valid children of DL */
DL > DD { color: red; }
DL > DT { color: silver; }

/* INVALID: DD elements ARE NOT valid a children of DT */
DT > DD { font-weight: bold;}

OL > LI {color: orange;}
UL > LI {color: blue;}