html／css pの中に複数のdivが入ってしまうのはOKですか？

いつもお世話になっております。
表題の件でまた教えてください。

p（テキスト）が複数行あって、それぞれフォントや色を変えたい時は、
一行ずつ　divを入れることになるでしょうか？
その度にclass名を変えていくしかないですか？
他にもっといい方法があったら教えてください。

<section　class="schedule">
<div class="">
<p>○○</p>
</div>

<div class="">
<p>○○○○○○</p>
</div>

<div class="">
<p>○○○○○○○○○○</p>
</div>

<div class="">
<p>○○○○○○○○○○</p>
</div>
</section>

No.1 回答者： wanderer1 回答日時： 2020/07/08 21:42

どういう理由で色を変えるのか？ という論理がコーディングに影響します。

いろいろ見たのですが、<p>タグに<div>タグを入れてはいけない、という記事しか見つかりませんでした。
あえてやるなら
<span>タグでくくってあげる方法ですが、やっぱりそこにも論理は必要です。

この回答へのお礼

ありがとうございました！

お礼日時：2020/07/09 10:48

No.2 ベストアンサー 回答者： naokita 回答日時： 2020/07/08 22:51

・DIVを設置しても良い（Pが複数入る拡張を想定できる場合ならDIVが必要）

・DIV無しで、Pにクラス設定でも良い
・DIV無しで、Pの隣接セレクタでも良い


<section　class="schedule">
<p>○○</p>
<p>○○○○○○</p>
<p>○○○○○○○○○○</p>
</section>

１つ目のPを赤、２つ目を青、３つ目を緑にするなら、（少ない○番目なら）
.schedule p{color:red;}
.schedule p + p{color:blue;}
.schedule p + p + p{color:green;}

----------------

・DIV無しで、Pのn番目でも良い（数が多い時の○○番目とかも簡単）
.schedule p:first-child {color:red;}
.schedule p:nth-child(2) {color:blue;}
.schedule p:nth-child(3) {color:green;}

色々と方法はありますよ。
.schedule p:nth-child(6n) {color:blue;}

No.3 回答者： naokita 回答日時： 2020/07/08 23:06

#2です　追記

<section　class="schedule"> だとNGになるので、
<section class="schedule"> ですよ・・・ 注意しましょう！

No.4 回答者： fujillin 回答日時： 2020/07/08 23:56

こんばんは

タイトルでは
＞pの中に複数のdivが～
とありますが、ご例示のHTMLではそのような構造にはなっていませんね。
内容として連続する段落（p要素）であるのなら、わざわざdivで分割する構造にすることに意味は感じられません。
本来、マークアップは文書構造を示すものとされていますので。

＞それぞれフォントや色を変えたい時は、～
ということだけが目的なら、それぞれのp要素に書式を設定すればすむことと思います。
個々にclassを設定しても良いですが、決まった順ならclass等を設けなくても順序を利用すれば指定が可能です。（+やnth-childを利用）

関係のない他のp要素に影響しないために、適用範囲を明示する意味で、対象範囲全体をclass付のdiv等で包含しておくことが考えられます。