親要素に子要素の背景をつける事は可能でしょうか？

Question

初心者の質問です。
質問内容が無理難題でしたら、申し訳ありません。

親要素に子要素が重なるような背景を
CSSで記述することは可能でしょうか？

＜注意事項＞
※背景用のDIV（要素）を加えることはできない場合
※レスポンシブに対応したCSS
※子要素の内容が増えると合わせて背景も長くなる

Comments

[maisumakun]

子要素1と子要素2は背景がつながっていて、子要素2と3の間は背景が途切れていますが、これはどういう意味合いでしょうか。

[退会済みユーザー]

途切れる仕様です。子要素１、２には赤の背景、子要素３，４には青の背景をつけるといったイメージになります。

[yoshinavi]

意味を理解出来てないかもですが、親の背景は表示しないで子の背景だけを表示したいとの事で良いのでしょうか？

[退会済みユーザー]

親の背景はグレーの部分にあたります。これが子要素にうまく重なるイメージです。

[yoshinavi]

親に背景設定をしないで、子の要素に背景設定すれば良いのでは？

[defghi1977]

おっしゃっている意味が全くわからない. 特に「親要素に子要素が重なるような背景」の部分, 親要素の上に子要素が重なるのは当たり前として, その間の背景がどうなってほしいのか, HTML構造を示すなり, 具体的な動作の例を示して欲しい.

[退会済みユーザー]

確かにおっしゃる通りなのですが、その場合、子要素１、２、３、４と個々に背景を設定しないといけなくなるので、図のようにひとくくりで設定できないかと悩んでいました。

[yoshinavi]

ひとくくりだとdivの追加が早いです。しかし、追加が出来ないのであれば、個々（1と2、3と4など）に設定するしかないです。

[退会済みユーザー]

やはり、個々に設定するしかないんですね。ご指摘いただきありがとうございます。

[defghi1977]

個々に設定するというより 「上手にセレクタを記述すればさほど苦労せず背景の設定ができる」はずなので, そのためにHTML構造を提示してほしかったということです.

Answer 1

ほい。

<div>
  <div>aaa</div>
  <div>bbb</div>
  <div>aaa</div>
  <div>bbb</div>
  <div>aaa</div>
  <div>bbb</div>
</div>

div>div {
  background-color: blue;
  position: relative;
  margin: 1em;
  color: #eee;
}
div>div::before {
  background-color: green;
  content: '';
  position: absolute;
  top: -1em;
  right: -1em;
  bottom: -1em;
  left: -1em;
  z-index: -1;
}
div>div:nth-child(2n) {
  margin-bottom: 3em;
}
```**動くサンプル：**[https://jsfiddle.net/Lckvt1dr/](https://jsfiddle.net/Lckvt1dr/)

Comments

[退会済みユーザー]

ありがとうございます。初心者の私でもわかりやすく、動くサンプルまでつけていただき感動しました。

Answer 2

質問文を見た感じ親要素に依存した実装をしたくなさそうだったので(親要素があっていいなら間に要素があったっていいような…)、親要素なし縛りで実装してみました。
(最初は親要素も含めようとした名残でchldというクラス名をつけてしまいましたが…)

要素数も2個セットだとは明記されていなかったので任意の個数としています。

以下背景をつけたいグループに対して同じクラスgroup-i(iは整数)をつけることとします。数値設定は都合のいいように変えてください。

<div class="chld group-1">
要素1
</div>
<div class="chld group-1">
要素2
</div>

<div class="chld group-2">
要素3
</div>
<div class="chld group-2">
要素4
</div>

<div class="chld group-3">
要素5
</div>
<div class="chld group-3">
要素6
</div>
<div class="chld group-3">
要素7
</div>

* {
  margin: 0;
  padding: 0;
}

.chld {
  position: relative;
  margin: 6vh 10vw;
  width: 80vw;
  height: 10vh;
  background-color: #888888;
}

ここからがミソの部分です。

var nth = 0;
const GROUP_NUM = 3;

const COLORS = [ // この配列は都合上あるものなので気にしなくていいです。
  ["ff0000","dd0000"]
 ,["0000ff","0000dd"]
 ,["00ff00","00dd00"]
];

for(let i=0; i < GROUP_NUM; i++){

  let n = document.getElementsByClassName("group-"+(i+1)).length;

  let css =
`div:nth-of-type(${nth+1})::before {
  content: "";
  position: absolute;
  top: -2vh;
  left: -5vw;
  width: 90vw;
  height: calc(calc(${n} * 10vh) + calc(${n-1} * 6vh) + 4vh);
  z-index: -1;
  background-image: url(http://placehold.jp/${COLORS[i][0]}/${COLORS[i][1]}/50x50.png);
  background-repeat: repeat;
}`;

  document.head.innerHTML += "<style>"+css+"</style>";
  nth += n;
}

本当はcss(またはsassとか？)だけで済ましたかったのですが、私の力不足でjsに頼ってしまいました…すみません。。

jsFiddle

この回答で言いたいことは、

「実装できなくはないけど、『※背景用のDIV（要素）を加えることはできない場合』なんて仕様は無くした方が良い」

ということです。「js使うといいよ」という意味ではないです。

私の回答よりスマートなものはあるかもしれませんが、とにかく「回りくどい表現になってしまうよ」ということが言いたいです。

ちなみに、その仕様がなければdivで囲むだけで済みます。

<div id="red" class="wrapper">
  <div class="chld">
  要素1
  </div>
  <div class="chld">
  要素2
  </div>
</div>

<div id="blue" class="wrapper">
  <div class="chld">
  要素3
  </div>
  <div class="chld">
  要素4
  </div>
</div>

<div id="green" class="wrapper">
  <div class="chld">
  要素5
  </div>
  <div class="chld">
  要素6
  </div>
  <div class="chld">
  要素7
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}

.chld {
  /* position: relative;
  margin: 6vh 10vw; */
  margin-bottom: 6vh;
  width: 80vw;
  height: 10vh;
  background-color: #888888;
}

.chld:last-child {
  margin-bottom: 0;
}

.wrapper {
  margin: 4vh 5vw;
  padding: 2vh 5vw;
  z-index: -1;
  background-repeat: repeat;
}

#red {
  background-image: url(http://placehold.jp/ff0000/dd0000/50x50.png);
}

#blue {
  background-image: url(http://placehold.jp/0000ff/0000dd/50x50.png);
}

#green {
  background-image: url(http://placehold.jp/00ff00/00dd00/50x50.png);
}

長々と失礼しました。参考になれば幸いです。m(_ _)m

Answer 3

厳密には背景ではありませんが、子要素側のボーダーを太くしてborder-imageを使えば、似たようなことはできるかもしれません（MDN）。

Comments

[退会済みユーザー]

それは思いつきませんでした！アドバイスいただきありがとうございます。１度試してみます。