HTML/CSSの:not()によるレイアウトがうまくできない

Question

概要

<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; } ``` # 完成イメージ図 

Comments

[m.ts10806]

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

[退会済みユーザー]

CSSに修正しておきます

Answer 1

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

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

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

Answer 2

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

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

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

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

section {
  display: flex;
  justify-content: space-between;
  position: relative;
  h1 {
    position: absolute;
    top: 0;       //お好みに
    left: 200px;  //お好みに
  }  
}

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

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

section :not(h1) {
  display: flex;
  justify-content: space-between;
}

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

---

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

section{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border:1px solid;
  padding: 10px;
  > * {
    border:1px solid;
    width: 45%;
  }
  h1 {
    margin-right: 40%;
  }
}

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

section{
  display: grid;
  grid-template-columns:1fr 1fr;
  gap: 10px;
  border:1px solid;
  padding: 10px;
  > * {
    border:1px solid;
  }
  div {
    grid-row: 2;
  }
}

Comments

[退会済みユーザー]

完成イメージを張っておきます。

Answer 3

HTML構造を変えない限り不可能です。

display:flexは、外側のコンテナに対して適用するものであり、そしてその直下にあるエレメントはすべてフレックスアイテムとなります。

「同じ<section>の子要素のうち、<div>だけをフレックスボックスとする」方法はありません。

Comments

[maisumakun]

そうでなくて、<div>自体をフレックスコンテナにすることは可能です（現状では中身が<p>だけなのであまり意味はなさそうですが）。