flexで2つの要素間だけ色をつけたい

当方初心者です。

<div>
<h2>見出し</h2>
<ul>
<li>AAA
<li>BBB
<li>CCC
</ul>
<p>文章</p>
</div>

こんなhtmlで

見出し
AAA[　　ここだけ背景色をつける　　　]BBB[　　ここだはつけない　　　]CCC
文章

のように背景色をつけたいです。
flexのspace-betweenでリストの並べ方はできるとしらべるとわかりましたが、背景色のつけ方がわかりません。
背景色要素の間などで調べてみました。

CSSはかなりはしょりますが、こうなっております。

body {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

div {            background: #f7e1b5;
    width: 80%;
    display: flex;
    flex-direction: column;}

ul {            padding: 0;
display: flex;justify-content: space-between;
    list-style: none;
}

kszk311

2018/03/16 16:51

現状のCSSも記載してもらえますか

s8_chu

2018/03/16 16:52

`divタグ`はどこで閉じてるんでしょうか？

doqqu

2018/03/16 17:00

指摘ありがとうございます。divタグとCSSを記載しました。

kszk311

2018/03/16 17:01

divまた開いてますよ…

s8_chu

2018/03/16 17:08

というか、「こんなhtmlで～」のところにCCCが見当たりませんが･･･。

doqqu

2018/03/16 17:38

たびたびすみません、これでいいですか？

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

回答2件

的外れかもしれませんが、以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        body {
8            display: flex;
9            width: 100%;
10            margin: 0;
11            justify-content: center;
12        }
13
14        div {
15            display: flex;
16            flex-direction: column;
17            width: 80%;
18            background: #f7e1b5;
19        }
20
21        ul {
22            display: flex;
23            padding: 0;
24            list-style: none;
25            justify-content: space-between;
26        }
27
28        ul::before, ul::after {
29            content: '';
30            flex: 1;
31            order: 1;
32        }
33
34        ul::before {
35            background: #faa;
36        }
37
38        li:nth-of-type(2) {
39            order: 1;
40        }
41
42        li:nth-of-type(3) {
43            order: 2;
44        }
45    </style>
46</head>
47<body>
48<div>
49    <h2>見出し</h2>
50    <ul>
51        <li>AAA</li>
52        <li>BBB</li>
53        <li>CCC</li>
54    </ul>
55    <p>文章</p>
56</div>
57</body>
58</html>

投稿2018/03/16 18:04

編集2018/03/17 10:32

s8_chu

総合スコア14731

背景色を付けるというより、
背景の上書きをしたほうが早いですかね。

css
1	ul {
2		background: #fff;/* 付けたい色 */
3	}
4	li {
5		background: #f7e1b5;/* 親（div）の背景色をもう一度指定 */
6	}
7

追記

BBBとCCCの間が背景付けないと知って。
それだと強引になっちゃいますね。

css
1	ul {
2		position: relative;
3	}
4	ul:before {
5		background: #fff;
6		content: '';
7		display: block;
8		height: 100%;
9		width: 50%;
10		position: absolute;
11	}
12	li {
13		background: #f7e1b5;
14	}

追記 3/18

css
1	ul {
2		background:linear-gradient(90deg,#fff 0%,#fff 50%,#f7e1b5 50%,#f7e1b5 100%);
3	}
4	li {
5		background: #f7e1b5;/* 親（div）の背景色をもう一度指定 */
6	}
7