ナビゲーションメニューに個別に背景色をつけたいのですが

あああの背景色は青
いいいの背景色は緑
うううの背景色は黄色

っといった感じにするのはどのようにすればいいのでしょうか？
調べようと思ったのですが、どんなワードで検索すればいいのかわからず困ってます。

html
1<ul class="global-nav">
2  <li><a href="#">あああ</a></li>
3  <li><a href="#">いいい</a></li>
4  <li><a href="#">ううう</a></li>
5  <li><a href="#">えええ</a></li>
6  <li><a href="#">おおお</a></li>
7</ul>

CSS
1.global-nav {
2  margin: 0 0 30px;
3  padding: 0;
4  border-top: 1px solid #aaa;
5  font-size: 13px;
6  list-style-type: none;
7}
8/*clearfix*/
9.global-nav:after {
10  content: "";
11  clear: both;
12  display: block;
13}
14.global-nav li {
15  float: left;
16  width: 50%;
17  text-align: center;
18  border-bottom: 1px solid #aaa;
19  -webkit-box-sizing: border-box;
20  -moz-box-sizing: border-box;
21  box-sizing: border-box;
22}
23/*奇数のli要素に適応*/
24.global-nav li:nth-child(odd) {
25  border-right: 1px solid #aaa;
26}
27.global-nav a {
28  display: block;
29  line-height: 44px;
30  color: #000;
31  text-decoration: none;
32}
33.global-nav a:hover {
34  color: #000;
35  background: #e6e6e6;
36}
37/*横幅1280px以上に適応*/
38@media screen and (min-width: 1280px) {
39.global-nav li:nth-child(odd) {
40  border-right: none;
41}
42.global-nav {
43  display: table;
44  table-layout: fixed;
45  width: 100%;
46  border-top: none;
47  border-collapse: collapse;
48}
49.global-nav li {
50  float: none;
51  display: table-cell;
52  width: 100%;
53  border-bottom: none;
54  border: 1px solid #aaa;
55}
56.global-nav li:nth-child(odd) {
57  border-right: 1px solid #aaa;
58}
59.global-nav a {
60  display: block;
61  line-height: 44px;
62  color: #000;
63  text-decoration: none;
64}
65.global-nav a:hover {
66  color: #000;
67  background: #e6e6e6;
68}
69}

Lhankor_Mhy

2020/03/26 10:11

HTMLを変更してもいいのですか？

panisyo

2020/03/26 10:13

大丈夫です！

m.ts10806

2020/03/26 11:26

classつければいいと思うのですけど、これ、自身で書いたコードですよね？

行動規範の内容に同意します

回答1件

ベストアンサー

ソースコードでいうと例えば以下です。
「aaa」「iii」「uuu」「eee」「ooo」がクラス名です。
クラス名は適当に考えたので、好きなように変えてください。

変更する場合は、HTML側とCSS側、両方同じ名前に揃えることに注意してください。
(揃えないと、HTMLの要素とCSSの記述とをパソコンがひもづけできないため)

HTML
1<ul class="global-nav">
2  <li class="aaa"><a href="#">あああ</a></li>
3  <li class="iii"><a href="#">いいい</a></li>
4  <li class="uuu"><a href="#">ううう</a></li>
5  <li class="eee"><a href="#">えええ</a></li>
6  <li class="ooo"><a href="#">おおお</a></li>
7</ul>

CSS
1.global-nav li.aaa a {
2    background: #f00;
3}
4.global-nav li.iii a {
5    background: #ff0;
6}
7.global-nav li.uuu a {
8    background: #0f0;
9}
10.global-nav li.eee a {
11    background: #0ff;
12}
13.global-nav li.ooo a {
14    background: #00f;
15}