横並びのボタンの背景を片方だけCSSで変更したい

初歩的な質問で申し訳ありません。今独学でサイト制作を勉強しています。

ul.liで横並びにしているボタンの片方だけ背景の色を変えたいのですが、CSSがul.liに指定されていて一つだけかえられません。
こちらの変更のタグを教えていただけますと幸いです。
現在

<div class="xxx">
<ul>
<li>
<a href="#1">ボタン1</a>
</li>
<li>
<a href="#2">ボタン2</a>
</li>
</ul>

CSS
.xxx ul{padding-top:20px;}
.xxx ul li{background:#DC34BA;color:#FFF;padding:5px 10px;min-width:120px;text-align:center;display:inline-block;margin-right:10px;}

宜しくお願い致します、

No.1 ベストアンサー 回答者： t_fumiaki 回答日時： 2016/12/02 07:13

本当はcssを２個準備するけど、臨時にhtml側に書いた。

下の例はボタン1の背景を赤にした。
<div class="xxx">
<ul>
<li style="background:#ff0000;">
<a href="#1">ボタン1</a>
</li>
<li>
<a href="#2">ボタン2</a>
</li>
</ul>

---------------------------------------------------------
cssでやるのなら、classを２個作る
<ul>
<li class="a1">
<a href="#1">ボタン1</a>
</li>
<li class="a2">
<a href="#2">ボタン2</a>
</li>
</ul>

.xxx ul{padding-top:20px;}

.a1 ul li{background:#ff0000;color:#FFF;padding:5px 10px;min-width:120px;text-align:center;display:inline-block;margin-right:10px;}

.a2 ul li{background:#DC34BA;color:#FFF;padding:5px 10px;min-width:120px;text-align:center;display:inline-block;margin-right:10px;}

No.3 回答者： ORUKA1951 回答日時： 2016/12/02 09:22

<div class="nav">

　あるいは、class="contentTable" とか
・・・div,spanに限らず「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
<div class="header">
　<div class="nav">
　　<ul>
　　　<li><a href="#1">ボタン1</a></li>
　　　<li><a href="#2">ボタン2</a></li>
　　</ul>
div.header div.nav ul{list-style-type:none;margin:5px;padding:0;text-align:center;}
div.header div.nav ul li{margin:0;dispaly:inline-block;padding:5px 10px;min-width:120px;background-color:yellow;}

特定のliのみ変更したい
div.header div.nav ul li+li{background-color:lime;}
div.header div.nav ul li+li+li{background-color:yellow;}
あるいは
div.header div.nav ul li:nth-child(2){background-color:lime;}

あるいは、
div.header div.nav ul li{margin:0;dispaly:inline-block;padding:5px 10px;min-width:120px;position:relative;}
div.header div.nav ul li a{display:block;width:100%;height:100%;background-color:yellow;}
div.header div.nav ul li a[href="#2"]{background-color:lime;}
・・・このほうが、リンク先で変えられるのでよいでしょう。

★.xxx ul{padding-top:20px;}
　CSS2以降、起点となるセレクタを書くことになっている。
　なくても、*.xxx 全称セレクタ(詳細度0)を補完して解釈してくれるけど、原則は必ず書く

★ セレクタ・詳細度などカスケーディングの機能は、CSS(カスケーディングスタイルシート)の根幹にかかわる部分です。
　プロパティより先に、完全に理解しておくべきです。

★ <li style="background:#ff0000;">
　要素のstyle属性で指定すると、その詳細度は(1,0,0,0)となり、よそから変更できなくなります。よほどのことがない限り行いません。

＞こちらの変更のタグを教えていただけますと幸いです。
　ではなくて、特定の要素を指定するセレクタの書き方を・・・ですね。
　属性セレクタ、子孫セレクタ、子供セレクタ、隣接セレクタ・・・を駆使して指定すれば簡単です。

Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 日本語訳( https://momdo.github.io/css2/Overview.html )
5 セレクター
6 プロパティ値とカスケーディング、継承の割り当て

No.2 回答者： fujillin 回答日時： 2016/12/02 09:07

こんにちは

CSSのセレクタに、位置関係などを利用した指定方法があります。
これを利用すれば、個々の要素にidやclass名などを付与しなくても指定が可能です。

ご質問の場合に利用できそうな疑似クラスのセレクタを以下に。
◇ :first-child
https://developer.mozilla.org/ja/docs/Web/CSS/:f …
◇ :last-child
https://developer.mozilla.org/ja/docs/Web/CSS/:l …
◇ :nth-child
https://developer.mozilla.org/ja/docs/Web/CSS/:n …


※ 参考までに、疑似クラスの全体像は
https://developer.mozilla.org/ja/docs/Web/CSS/Ps …

※ CSS全般について調べるなら
https://developer.mozilla.org/ja/docs/Web/CSS/Re …