CSSで可能な解決策の前に兄弟セレクタ

Question

私は前の兄弟セレクタの必要があります。私はそのようなセレクタがないこと、またはベータテスト中であることを知っています。これは、パフォーマンスとトラバースのために意味があります。

しかし、私は他のトリックを使用してこれを達成したいが、どちらがパフォーマンスを考慮すれば良いかわからない。リストの項目は、この項目内のリンクより子供たちがその前にアイコン（シェブロン右）を持っている必要があります持っている場合はここ

は私のHTMLレイアウトは

<div class="accordion-menu"> 
     <ul class="accordion-list cd-accordion-menu is-root"> 
      <li class="accordion-list-item has-children"> 
       <a class="accordion-list-item__link" href="#0"> 
        <span class="accordion-list-item__icon ion-settings"></span> 
        Sub Group 1 
       </a> 
       <ul class="accordion-list is-opened"> 
        <li class="accordion-list-item has-children"> 
         <a class="accordion-list-item__link" href="#0"> 
          <span class="accordion-list-item__icon fa fa-bars"></span> 
          Sub Group 1.1 
         </a> 
         <ul class="accordion-list"> 
          <li class="accordion-list-item"> 
           <a class="accordion-list-item__link" href="#0"> 
            <span class="accordion-list-item__icon fa fa-bars"></span> 
            Item 1 
           </a> 
          </li> 
          <li class="accordion-list-item"> 
           <a class="accordion-list-item__link" href="#0"> 
            <span class="accordion-list-item__icon fa fa-bars"></span> 
            Item 2 
           </a> 
          </li> 
          <li class="accordion-list-item"> 
           <a class="accordion-list-item__link" href="#0"> 
            <span class="accordion-list-item__icon fa fa-bars"></span> 
            Item 3 
           </a> 
          </li> 
         </ul> 
        </li> 
        <li class="accordion-list-item"> 
         <a class="accordion-list-item__link" href="#0"> 
          <span class="accordion-list-item__icon fa fa-bars"></span> 
          Item 1 
         </a> 
        </li> 
        <li class="accordion-list-item"> 
         <a class="accordion-list-item__link" href="#0"> 
          <span class="accordion-list-item__icon fa fa-bars"></span> 
          Item 2 
         </a> 
        </li> 
       </ul> 
      </li> 
      <li class="accordion-list-item"> 
       <a class="accordion-list-item__link" href="#0"> 
        <span class="accordion-list-item__icon fa fa-bars"></span> 
        Sub Group 2 
       </a> 
      </li> 
      <li class="accordion-list-item"> 
       <a class="accordion-list-item__link" href="#0"> 
        <span class="accordion-list-item__icon fa fa-bars"></span> 
        Sub Group 3 
       </a> 
      </li> 
     </ul> <!-- cd-accordion-menu --> 
    </div> 

CSS

.accordion-list-item.has-children > .accordion-list-item__link::before { 
    margin-right: 4px; 
    content: '\f125'; 
    font-family: "Ionicons"; } 

のここで最も重要な部分です。

しかし、別の状態is-openedはaccordion-listです。そしてaccordion-listクラスでアイコン前のリンクを別のコンテンツに変更する場合は、content: '\f123';（シェブロンダウン）

パフォーマンスを考慮して、このような動作をどうすれば実現できますか？ 私はチェックボックスを使用するようなトリックを知っていますが、これを達成するための他の方法がありますか？

私は何か助けに感謝します。物事をより明確にする

UPDATE

。これはHTMLコードの一部で、兄弟を選択する必要があります。

<a class="accordion-list-item__link" href="#0"> 
    <span class="accordion-list-item__icon ion-settings"></span> 
        Sub Group 1 
    </a> 
    <ul class="accordion-list is-opened"> 

例でULは（DOMツリーに）上記のリンクを同胞よりもクラスis-openedを有するよう場合accordion-list-item__link::beforeは、アイコンを変更すべきです。

POSSIBLE SOLUTION

私は、唯一のアイデアは、リストはjqueryのを使用して開かれたときに自分自身をリンクするis-openedクラスを追加することですがあります。

Answer 1

使用それは.accordionリスト項目は、両方のクラスは、子供を持っているし、このCSSは

EDIT適用され、開かれている場合ことを意味し、このコード：私は考えて

.accordion-list.is-opened > .accordion-list-item.has-children > .accordion-list-item__link::before { 
     content: '\f123'; 
     } 

Answer 2

をこれを試してチェックすることができます。どちらの場合も

1. ul.accordion-list > .accordion-list-item.has-children > .accordion-list-item__link::before 
{ 
    content: '\f125'; 
} 

2. ul.accordion-list.is-opened > .accordion-list-item.has-children > .accordion-list-item__link::before 
{ 
    content: '\f123'; 
}