ネストされたリスト要素の背景色を設定する

Question

すべての「販売」要素の背景を設定することはできますか？

#navigation li:last-child a { 
    border-right: none; 
    background: red; 
} 

私は他のすべての「特売」li要素の背景を設定する必要があります。私はそうのように、「特売」のアンカータグの背景を設定することができました。

CSSでこれらの要素の背景を設定するにはどうすればよいですか？私はJQueryを使用する必要があるかもしれないと思っていますが、CSSが望ましいでしょう。

<div id="navigation" class="cf"> 
<div id="hamburger_wrap"> 
    <a href="#" id="hamburger">Main Menu</a> 
</div> 
<ul style="display: -webkit-flex;"> 
    <li class="active"> 
     <a title="Home" href="/" class="active "> 
      <b class="ico-home">Home</b> 
     </a> 
    </li> 
    <li> 
     <a title="Living Room" href="/Living-Room-Furniture" class="hasChildren ">Living Room</a> 
     <ul class="dropdown" style="display: none;"> 
      <li> 
       <a title="By Living Room Range" href="/Living-Room-Furniture">By Living Room Range</a> 
      </li> 
      <li> 
       <a title="Nest of Tables" href="/Nest-Of-Tables">Nest of Tables</a> 
      </li> 
      <li> 
       <a title="Coffee Tables" href="/Coffee-Tables">Coffee Tables</a> 
      </li> 

     </ul> 
    </li> 
    <li> 
     <a title="SALE" href="Top-Sale-items" class="hasChildren ">SALE</a> 
     <ul class="dropdown" style="display: -webkit-flex;"> 
      <li> 
       <a title="SALE Beds" href="/Sale-Beds">SALE Beds</a> 
      </li> 
      <li> 
       <a title="SALE Mattresses" href="/Sale-Mattresses">SALE Mattresses</a> 
      </li> 
      <li> 
       <a title="SALE Bed Frames" href="/Sale-Bed-Frames">SALE Bed Frames</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

Answer 1

あなたのセレクタがある

#navigation > ul > li:last-child a 

デモ：

#navigation > ul > li:last-child a { 
 
    background-color: lightgreen; 
 
}

<div id="navigation" class="cf"> 
 
<div id="hamburger_wrap"> 
 
    <a href="#" id="hamburger">Main Menu</a> 
 
</div> 
 
<ul> 
 
    <li class="active"> 
 
     <a title="Home" href="/" class="active "> 
 
      <b class="ico-home">Home</b> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a title="Living Room" href="/Living-Room-Furniture" class="hasChildren ">Living Room</a> 
 
     <ul class="dropdown" style="display: none;"> 
 
      <li> 
 
       <a title="By Living Room Range" href="/Living-Room-Furniture">By Living Room Range</a> 
 
      </li> 
 
      <li> 
 
       <a title="Nest of Tables" href="/Nest-Of-Tables">Nest of Tables</a> 
 
      </li> 
 
      <li> 
 
       <a title="Coffee Tables" href="/Coffee-Tables">Coffee Tables</a> 
 
      </li> 
 

 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a title="SALE" href="Top-Sale-items" class="hasChildren ">SALE</a> 
 
     <ul class="dropdown"> 
 
      <li> 
 
       <a title="SALE Beds" href="/Sale-Beds">SALE Beds</a> 
 
      </li> 
 
      <li> 
 
       <a title="SALE Mattresses" href="/Sale-Mattresses">SALE Mattresses</a> 
 
      </li> 
 
      <li> 
 
       <a title="SALE Bed Frames" href="/Sale-Bed-Frames">SALE Bed Frames</a> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 2

私はあなたのスタイルにしたい要素に、saleのクラスを設定することをお勧めしたいです。

a.sale { 
    background: red; 
} 

あなたが何らかの理由でクラスを設定することができない場合は、あなたがattribute selectorsを使用することができます。

// SALE is at the beginning of the title 
a[title^="SALE"] { 
    background: red; 
} 

// SALE is found anywhere in the title 
a[title*="SALE"] { 
    background: red; 
} 

// SALE is found anywhere in the title as a white-space-surrounded word 
a[title~="SALE"] { 
    background: red; 
} 

Answer 3

あなたは=「特売」タイトルの要素をカバーするために、以下を使用することができ、タイトル= "summer SALE"とtitle = "SALE winter"です。

a[title~="SALE"] { 
    background-color: blue; 
} 

または、「SALE」要素にクラスを割り当てます。

Answer 4

バックグラウンドを設定する要素にclassを追加するだけです。テキストのセクションに背景があるようにするには、spanで囲んで、希望の背景色を持つclassを設定します。

Answer 5

私はこれがcodepenあなたを助けることができると思います！

<ul> 
    <li title="sale asd">ONE</li> 
    <li title="sale erw">TWO</li> 
    <li title="no">THREE</li>  
</ul> 


/**CSS**/ 
li[title~="sale"]{color:red;}