wordpressで投稿ページ（single.php)に個別CSSを設定した時にヘッダーにまでCSSが適用されてしまう

Question

wordpressで自作のサイトの制作をしています。
ブログの個別記事全てのページの内容にだけ個別ページ用のCSSを適用させたいです。
single.phpでブログの個別記事の作成をしたのですが、h,a,ul,pなどなど、に.single h1などという形で個別のCSSを適用させました。
その際に、同ページ内に表示しているヘッダー（全ページ同じCSSを適用したい）にまで影響が及んでしまいレイアウトが崩れていしまいます。この場合どう対処したらいいでしょうか？

<?php get_header(); ?>


<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>

<div id="post">
  <div class="inner">
    <div class="post-ttl">
      <h1><?php the_title(); ?></h1>
      <div class="post-info">
        <p class="post-data"><?php the_time('Y年m月j日') ?></p>
        <p class="post-tag"><?php the_category(', ') ?></p>

      </div>
    </div>
    <div class="post-img">
      <?php the_post_thumbnail('medium'); ?>

    </div>
    <?php the_content(); ?>


  </div>
</div>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

.single ul,
.single ol{
  margin-top: 3rem;
  list-style-position: inside;
  
}

このような感じでhタグや他のタグも書いています

ヘッダーのナビゲーションにはstyle.cssの記述だけを適用したいのですが、個別ページのcssにはクラス名がないためか優先順位的にところどころ個別ページのCSSが適用されてしまいヘッダーのレイアウトが崩れています

試したこと
・single.phpの<?php get_header(); ?>下にもしsingle.phpならsingle.cssを適用するという記述をした。
・ヘッダーのCSSの優先順位があげられないかどうにかクラスをつけたりしてみた。

Answer 1

テンプレートにもよるかもしれませんが、本文はmainタグに囲まれていると思うので、main要素を指定しては如何でしょう？

Comments

[benkyosuruo]

今家に帰ってこれて試したらおっしゃる通りでした！なぜこんな単純なことに気づかなかったのか不思議でなりません。。本当にありがとうございます！！