html - 複数の div からネストされた最初の ul を選択する方法

Question

css でクラス領域の最初の ul だけを選択します

<div class='area'>
  <div>
   <ul>     
      <li>
         <ul>
      </li>
  </div>
</div>
<div class='area'>
  <div>
   <ul>
      <li>
         <ul>
      </li>
  </div>
</div>
<div class='area'>
  <div>
   <ul>
      <li>
         <ul>
      </li>
  </div>
</div>

私はこれを試しました

'.area > ul'# これは と の間では機能しませdivん.areaul

セレクターで中間の div を参照せずに要素を選択する別の方法はありますか?

したがって、最終的には、ulネストされた ul なしで 3 だけを取得する必要があります

アップデート

私のコードの他のいくつかのテンプレートでは、最初の ul は 2 番目のレベルの後に来ます

したがって、セレクターでの混乱を避けるために、中間の div を回避しようとしています。