【CSS】リストの入れ子のデザインを変更させたい

Question

前提・実現したいこと

入れ子になっているリストのデザインをシンプルに「〇」だけに変更させたい

該当のソースコード(CSS)

ul.cp_list {
	padding: 0.5em;
	list-style: none;
}
ul.cp_list li {
	position: relative;
	padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom:5px;
	border-bottom: 1px solid rgba(255,143,0,1);
}
ul.cp_list li:after,
ul.cp_list li:before {
	content:'';
	position: absolute;
	transform: rotate(45deg);
}
ul.cp_list li:before {
	top: 0.7em;
	left: 0.2em;
	width: 12px;
	height: 12px;
	border:2px solid rgba(255,143,0,1);
}
ul.cp_list li:after {
	top: 0.9em;
	left: 0.7em;
	width: 14px;
	height: 14px;
	background: rgba(255,143,0,0.5);
	transform: rotate(60deg);
}

該当のソースコード(html)

<ul class="cp_list">
 	<li>見出し１</li>
<ul>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
</ul>
 	<li>見出し２</li>
 	<ul>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
</ul>
</ul>

試したこと

「class」指定になっているのを何かしら変えた方がいいんだろうな、と思い
ひとまず全部idに変えてみたのですが結果は変わらずでした。
idとかそういう問題でもないのでしょうか？
※そもそもこのCSS自体、ネットでデザインテンプレートで提供されていたものなので、自分で記述したものではないため、いまいち良く理解していない。。。

補足情報（FW/ツールのバージョンなど）

ワードプレス5.4.2

ここにより詳細な情報を記載してください。

Answer 1

で直下の子要素のみ対象に

ul.cp_list li {
↓
ul.cp_list>li {

昔はIEだけこれが効かなかったのよね

Comments

[glanglan]

ありがとうございます。おかげさまで当初の目標は達成できました！
・・・が、今度は該当の投稿ページのタイトル上に１つひょっこり、
リストの「ひし形デザイン」登場してしまいました・・・。
これはもう仕方ないのでしょうか？
ちなみにテーマは、lightning prp
https://lightning.nagoya/ja/

もし他の記述方法があれば紹介いただければ助かります。

[glanglan]

↑すみません、勘違いだったっぽいです。解決しました。

Answer 2

解決されてますし質問内容に直接答えるものではないのですが、「入子のリスト」の場合には<li>の閉じ位置に気を付けた方が良いかと思います。
コードを貼るためコメントではなく回答で失礼します。

<ul class="cp_list">
  <li>
    見出し１<!-- ここで閉じない -->
    <ul>
      <li>リストA</li>
      <li>リストB</li>
      <li>リストC</li>
    </ul>
  </li><!-- ここで閉じる -->
  <li>
    見出し２<!-- ここで閉じない -->
    <ul>
      <li>リストA</li>
      <li>リストB</li>
      <li>リストC</li>
    </ul>
  </li><!-- ここで閉じる -->
</ul>

<ul>: 順序なしリスト要素(MDN)

許可されている内容

0個以上の <li> または <script> 、 <template> 要素。 <li> 要素の子孫としてさらに <ol> 要素や <ul> 要素を配置することも可能。