
初歩的な質問で申し訳ありません。今独学でサイト制作を勉強しています。
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ベストアンサー
- 回答日時:
本当はcssを2個準備するけど、臨時に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を2個作る
<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
- 回答日時:
<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
- 回答日時:
こんにちは
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 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html css jsなどを用いてリンク...
-
タブメニューでカレントタブを...
-
リストタグ firefoxでは表示さ...
-
CSS初心者です。至急お願いしま...
-
ホームページビルダーで同じ行...
-
HTML,CSSのみでDIVブロック
-
cssでロールオーバーを作る...
-
CSSでリスト[li]の表示がズレる
-
リストマーカーをボックス内に...
-
リストの入れ子について
-
CSSのドロップダウンメニューに...
-
CSSでメニューボタンを横一列に...
-
html5のnavに2つのspan要素を...
-
複数のdivを横並びさせる時一つ...
-
CSSのセンタリングが、「div」...
-
CSS2で隣接セレクタで特定の場...
-
ホームページのテーブルの位置...
-
IE6のページ内リンクについて
-
手書きのホームページ
-
cssのリストで、番号1と2の間の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
HTMLで組織図を作成する方法
-
list-style-type部分だけ大きく...
-
htmlの<ol>タグで、数字などを...
-
テーブル内のプルダウンの下に...
-
html <li>の中の文字一部に色を...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
divタグ内のコンテンツが重なっ...
-
リストの数字のフォントサイズ...
-
レスポンシブWebデザインでリン...
-
背景色を行ごとに変えるには?
-
Dreamweaverで、ul要素の下に写...
-
ページを開いているときのリン...
おすすめ情報