css でツリーのスタイルを一部リセットしたい

追記： ul の外側に配列を持ってくることが出来まして、他のアプローチで行けることがわかりました為、この質問はクローズといたします。

ツリー　の css を当てていまして 一部の li タグに対してツリーのcss をリセットして横並び表示用の css を当てたいと思っておりますがうまく当て込むことが出来ません。

まず css ですが 以下のものを利用しています。

.tree ul {margin-left:.5em} 

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.tree li  {
  margin:0;
  padding:0 1.5em;
  line-height:2em;
  font-weight:bold;
  position:relative;
}

.tree li span {
  height: 32px;
  line-height: 2em;
  font-weight:bold;
  position:relative;
  vertical-align: top;
}

.tree li mat-icon {
  vertical-align: top;
}

.tree li:before {
  content:"";
  display:block;
  width:10px;
  height:0;
  border-top:1px solid;
  margin-top:-1px;
  position:absolute;
  top:1em; 
  left:0;
}

.tree li:last-child:before {
  background:white;
  height:auto;
  top:1em; 
  bottom:0;
}

HTML は以下のような感じです。
node1, node2 の部分だけをツリーではなく　全く独立した横並びで表示したいと考えています。
これを実現する術として考えたのは .tree以下のcss を無効にした上で新しい横表示用のクラスを当てればいいんだと思い クラスを新規で作って.tree li :not(新規クラス名)　としたり、各ツリー用のcss を上書きして 値をinitial と当てて見たりしたのですが css 無効がうまくいきませんでした。
皆様のお知恵を拝借させていただきたく思っています。よろしくお願いします。

<ul>
  <li><span>parent1</span></li>
  <ul>
    <li><span>child</span></li>
  </ul>
  <li><span>parent2</span></li>
  <ul>
    <li><span>child</span></li>
  </ul>
  <li>node1</li>
  <li>node2</li>
</ul>