タイトルとその下の文章に背景色を適応させたいのですが上手くいきません。

実現したいこと
HTMLの<section id="about3">のテキストという文字の部分（タイトル）とその下の文章に背景色を適応させたいのですが上手くいきません。

試したこと
ｃｓｓに
.about3にbackground-color　効果なし

確かにｃｓｓのスタイルシートのsection {
overflow: hidden;
text-align: center;
padding: 10px 0;/*▽▽ section　ボタンと文字の余白を狭くする */
background-color: ;
}
で背景色はつくのですが、会社概要などにもsectionタグを使用しているため、そのところにも適応されてしまいます。

一部のsectionにだけ背景色を適応したいのですが、わからず先に進めずに困っています。
回答よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	
6	<title></title>
7
8    <link rel="stylesheet" href="reset.css">
9
10	<link rel="stylesheet" href="companyhp3.css">
11
12	<script src="jquery-3.6.0.min.js"></script>
13    <style type="text/css">
14      
15</style> 
16
17
18<script>
19		$(function() {
20			const hum = $('#hamburger, .close')
21			const nav = $('.sp-nav')
22			hum.on('click', function(){
23				nav.toggleClass('toggle');
24			});
25		});
26	  </script>
27</head>
28<body>
29<section id="about">
30        <div class="slide-bottom show">会社概要<span></span></div>
31
32    </section>
33
34    <section id="about2">
35        <div class="slide-bottom show">・・・ご挨拶・・・<span></span></div>
36
37    </section>
38  <section id="about3">
39        <div class="slide-bottom show">テキストテキスト<span></span></div>
40
41        <p class="slide-right show">
42            テキストテキストテキストテキストテキストテキストテキストテキスト<br>
43            テキストテキストテキストテキストテキストテキストテキストテキスト<br>
44            テキストテキストテキストテキストテキストテキストテキストテキスト<br>
45            
46             テキストテキストテキストテキストテキストテキストテキトテキストテキスト<br>
47
48             テキストテキストテキストテキストテキストテ<br>
49             テキストテキストテキストテキストテキストテ<br>
50            </p>
51
52    </section>  
53
54
55  <script>
56        //フェードイン用のコードです
57        $(function(){
58            $(window).on('load scroll', function() {
59                $(".show").each(function() {
60                    var winScroll = $(window).scrollTop();
61                    var winHeight = $(window).height();
62                    var scrollPos = winScroll + (winHeight * 0.9);
63                    if($(this).offset().top < scrollPos) {
64                        $(this).css({opacity: 1, transform: 'translate(0, 0)'});
65                    }
66                });
67            });
68        });
69        //フェードイン用のコードはここまでです
70    </script>
71
72</body>
73</html>

css
1/* section *//* section */ 
2section {
3	overflow: hidden;
4	text-align: center;
5	padding: 10px 0;
6}
7section div {
8  color:#6d6d6e;
9  font-size: 39px;
10  font-weight: 600;
11 
12  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
13  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
14  text-align: center;
15}
16section p {
17
18  color:#7c7878;
19  font-size: 27px;
20  font-weight: 400;
21  vertical-align: -10px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
22  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
23  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
24  text-align: center;/* ブロック要素のみしか本来適応できない */
25  line-height:50px;/* 文字の行間の調節 */
26
27}
28  /* sectionここまで *//* sectionここまで *//* sectionここまで *//* sectionここまで */
29
30
31
32  /* フェードイン用のCSS */
33/* 下からフェードイン */
34.slide-bottom {
35	opacity: 0;
36	transform: translate(0, 20px);
37	transition: all 1s ease-out;
38 }
39/* 左からフェードイン */
40.slide-left {
41	opacity: 0;
42	transform: translate(-20px, 0);
43	transition: all 1s ease-out;
44 }
45
46/* 右からフェードイン */
47.slide-right {
48	opacity: 0;
49	transform: translate(20px, 0);
50	transition: all 1s ease-out;
51 }
52
53/* フェードイン用のCSSここまで */

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

回答1件

ベストアンサー

idのついた要素に対してスタイルを当てるときは.ではなく#を使います。なので、次のような表記を試してみてはどうでしょうか？

css
1section#about3 {
2    overflow: hidden;
3    text-align: center;
4    padding: 10px 0;
5}
6section#about3 div {
7  color:#6d6d6e;
8  font-size: 39px;
9  font-weight: 600;
10
11  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
12  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
13  text-align: center;
14}
15section#about3 p {
16  color:#7c7878;
17  font-size: 27px;
18  font-weight: 400;
19  vertical-align: -10px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
20  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
21  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
22  text-align: center;/* ブロック要素のみしか本来適応できない */
23  line-height:50px;/* 文字の行間の調節 */
24}