仅对<dt>元素的第一个实例设置样式，而无需从第二个实例中物理删除样式（＆无需添加类或ID）

由 发布于

I have a description list <dl> element whose inner <dt> element I've have styled. The description list sits inside a main .content-wrapper div.

I would like the CSS styling for the first <dt> element to NOT be applied to the one inside the <article> element which has a <dl> and an associated <dt> element also.

With CSS ( and without adding any classes or IDs ), is there a way of applying the CSS only to the <dt> element in the outer content wrapper part of the markup without physically removing the styles from the 2nd <dt> element?

I've tried playing around with :not and the > descendent selector, but I can't seem to get it work?

The CSS selector would be something like dt:not(article > dt)

Codepen: https://codepen.io/emilychews/pen/pojYVZP

.content-wrapper dt {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  background: red;
  color: #fff;
}
<div class="content-wrapper">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quis consequatur veritatis maxime iste architecto rerum, illo ex perspiciatis obcaecati! Minus ea architecto odit dicta alias eveniet reiciendis. Modi, sunt!</p>
  <dl>
    <dt>Just Style This</dt> <!-- ONLY ADD THE STYLING TO THIS <dt> ELEMENT -->
    <dd>Information</dd>
    <dd>Information</dd>
  </dl>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas provident neque soluta accusamus repellendus explicabo recusandae, nemo quis, fugiat dolorum rem est ipsam molestias velit vitae numquam iusto sapiente. Placeat!</p>
  <article>
    <dl>
      <dt>Do Not Style This</dt> <!-- DON'T ADD THE STYLING TO THIS ELEMENT -->
      <dd>Information inner</dd>
      <dd>Information inner</dd>
    </dl>
  </article>
</div>