概要

<section>タグ内の<h1>タグを除いた<div>タグにdisplay:flex;を適用させたい ```HTHL <section> <h1>title</h1> <div><p>content1</p><p>content2</p></div> <div><p>content3</p><p>content4</p></div> </section> ``` ```CSS section:not(h1){ display: flex; justify-content: space-between; } ``` # 完成イメージ図 ![イメージ説明](0fd738bfb9fe1e04fcd96c45ec2e2aa9.png)

m.ts10806

2021/12/19 10:07

起きてる問題、質問は何でしょう。ただSCSSなら質問タグに必要でしょうし、コンパイル後のCSS提示されたほうが他者が再現確認しやすいです。

退会済みユーザー

2021/12/19 13:21

CSSに修正しておきます

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

回答3件

:not()を使うことは前提なのでしょうか。
単純に

css
1section:nth-child(n + 2){
2 display: flex;
3}

とすればh1を飛ばして２番目以降の子要素にflexを適用できると思うのですが、いかがでしょうか。

投稿2021/12/19 12:10

junyabuki

総合スコア15

ベストアンサー

最終的な希望のレイアウトはなんなのでしょうか。

section:not(h1) は意味としては、h1ではないsectionということになりますが、section が h1 でないことは自明のことです。

もし、section の子要素の中で、h1 をflexレイアウトの対象から外したい(Flexアイテムにしない)ということなら、h1はどこに配置したいのでしょうか。

とりあえず、h1 にposition: absolute;を設定すればflexレイアウトの対象から外れて、好きな位置に配置できます。

scss
1section {
2  display: flex;
3  justify-content: space-between;
4  position: relative;
5  h1 {
6    position: absolute;
7    top: 0;       //お好みに
8    left: 200px;  //お好みに
9  }  
10}

<section>タグ内の<h1>タグを除いた<div>タグにdisplay:flex;を適用させたい

この言葉通りにコード化すると、下記になりますね。
これで、h1以外の要素にdisplay:flex;が設定されます。ただし、子要素がp要素一つしかないので無意味な設定です。

css
1section :not(h1) {
2  display: flex;
3  justify-content: space-between;
4}

どちらにしても、たぶん、期待しているレイアウトと違うような気がします。目的と手段が合致していない状況ではないでしょう。。
どのようなレイアウトが希望なのか図示されたら、いい手段が提案されると思います。

完成イメージ図が提示されたので、
Flexboxを使う場合の一例を。

scss
1section{
2  display: flex;
3  justify-content: space-between;
4  flex-wrap: wrap;
5  border:1px solid;
6  padding: 10px;
7  > * {
8    border:1px solid;
9    width: 45%;
10  }
11  h1 {
12    margin-right: 40%;
13  }
14}

Gridレイアウト使った方がシンプルにできるとは思います。

scss
1section{
2  display: grid;
3  grid-template-columns:1fr 1fr;
4  gap: 10px;
5  border:1px solid;
6  padding: 10px;
7  > * {
8    border:1px solid;
9  }
10  div {
11    grid-row: 2;
12  }
13}