h2タグだけ全くCSSが効かない

前提

HTMLとCSSでWebサイトを作っています。

発生している問題・エラーメッセージ

h2タグで書いた「オプション検索」の部分だけCSSが効かず困っています。原因はなんでしょうか？よろしくお願いいたします。

該当のソースコード

searchFromMakers.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
6
7<title>searchFromMakers</title>
8<style>
9#searchFromMakers{
10  display: flow-root;/*prevent margin offset*/
11  box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5);
12  width: 415px;
13}
14#searchFromMakers h1{
15  margin: 0;
16  margin-left: 15px;
17  color: rgb(121, 121, 121, 0.5);
18}
19.options{
20  display: flex;
21  padding-left: 10px; 
22  margin-top: 10px;
23}
24.options p{
25  margin: 0;
26  padding-left: 10px;
27}
28.options select{
29  margin-left: 5px;
30  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
31}
32#showLine{
33  display: flex;
34  background-color: rgb(121, 121, 121, 0.1);
35  padding-left: 10px;
36  margin-top: 20px;
37}
38.carType_mini{
39  width: 122px;
40  margin: 5px;
41}
42.carType_mini img{
43  border: 1px solid #797979;
44}
45.lower_mini{
46  display: flex;
47  justify-content: space-between;
48  height: 20px;
49}
50.lower_mini p{ 
51  width: 100%;
52  margin: 0;
53  font-size: 12px;
54}
55input[type=checkbox] {
56display: none;
57}
58.checkbox{
59    box-sizing: border-box;
60    display: inline-block;
61    margin-right: 10px;
62    position: relative;
63    width: 15px;
64    cursor: pointer;
65}
66.checkbox::before {
67    border: 1px solid #797979;
68    content: '';
69    display: block;
70    height: 16px;
71    left: 5px;
72    margin-top: -8px;
73    position: absolute;
74    top: 50%;
75    width: 16px;
76}
77.checkbox::after {
78    border-right: 3px solid #ed7a9c;
79    border-bottom: 3px solid #ed7a9c;
80    content: '';
81    display: block;
82    height: 9px;
83    left: 10px;
84    margin-top: -7px;
85    opacity: 0;
86    position: absolute;
87    top: 50%;
88    transform: rotate(45deg);
89    width: 5px;
90}
91input[type=checkbox]:checked + .checkbox::after {
92    opacity: 1;
93}
94}
95
96#optionSearch h2{/*0723 ここが効いていない*/
97margin: 0;
98border-left: 5px solid red;
99padding-left: 10px;
100color: red;
101}
102select{
103cursor: pointer;
104}
105.options, .mission{/*同じだから消せる*/
106  display: flex;
107  padding-left: 10px;
108  margin-top: 10px;
109}
110.options p{/*同じだから消せる*/
111  margin: 0;
112  padding-left: 10px;
113}
114.options select{/*同じだから消せる*/
115  margin-left: 5px;
116  color: rgb(121, 121, 121, 0.5);/*https://note.spiqa.design/select-color/#option%E3%81%ABCSS%E3%81%AF%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84*/
117}
118.mission p{/*同じだから消せる*/
119  padding-left: 10px;
120}
121
122/*toggle switch*/
123.toggle {
124  position: relative;
125  width: 90px;
126  height: 24px;
127  margin-top: 15px;
128  margin-left: 15px;
129  user-select: none;
130  cursor: pointer;
131}
132.toggle input[type=checkbox] {
133  display: none;
134}
135.toggle span {
136  position: absolute;
137  top: 7px;
138  font-size: 12px;
139  font-weight: bold;
140  line-height: 1;
141  -webkit-transition: 0.2s ease-out;
142  transition: 0.2s ease-out;
143}
144.toggle span:nth-of-type(1) {
145  right: 16px;
146  color: rgba(0, 0, 0, 0.175);
147}
148.toggle span:nth-of-type(2) {
149  left: 16px;
150  color: white;
151  z-index: 2;
152}
153.toggle.checked span:nth-of-type(1) {
154  right: 15px;
155  color: white;
156  z-index: 2;
157}
158.toggle.checked span:nth-of-type(2) {
159  left: 15px;
160  color: rgba(0, 0, 0, 0.175);
161}
162.toggle:before {
163  content: "";
164  position: absolute;
165  top: 0;
166  left: 0;
167  width: 100%;
168  height: 100%;
169  border-radius: 50px;
170  display: block;
171  background: #FFF;
172  -webkit-transition: 0.2s ease-out;
173  transition: 0.2s ease-out;
174  border: 1px solid rgb(121, 121, 121, 0.5);
175}
176.toggle:after {
177  content: "";
178  position: absolute;
179  width: 45px;
180  height: 24px;
181  display: block;
182  border-radius: 50px;
183  background: #336666;
184  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
185  -webkit-transition: 0.2s ease-out;
186  transition: 0.2s ease-out;
187  margin-top: 1px;/*prevent the effect of border*/
188}
189.toggle.checked:before {
190  background: #FFF;
191}
192.toggle.checked:after {
193  left: 46px;/*moving*/
194  box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
195}
196.searchButton{/*同じから消す*/
197margin: 0 auto;/*center the box*/
198margin-bottom: 20px;
199text-align: center;/*center the a elements a*/
200background: #336666;
201padding-top: 10px;
202width: 50%;
203height: 35px;
204}
205.searchButton a{/*同じから消す*/
206text-decoration: none;
207color: #FFF;
208}
209.searchButton img{/*同じから消す*/
210width: 15px;
211height: 15px;
212margin-left: 10px;
213}
214
215@media (min-width: 1025px) {/*PC版*/
216}
217
218
219@media screen and  (max-width:1024px) {/*スマホ・タブレット版*/
220}
221
222</style>
223
224</head>
225<body>
226<div id="searchFromMakers">
227  <h1>メーカから探す</h1>
228
229  <div class="options">
230      <p>メーカー</p>
231
232      <select name="maker" onchange="changeColor(this)">
233        <option class="example1" value="">日産</option>
234        <option id="nissan">日産</option>
235        <option id="toyota">トヨタ</option>
236        <option id="matsuda">マツダ</option>
237        <option id="daihatu">ダイハツ</option>
238        <option id="suzuki">スズキ</option>
239      </select>
240      <p>車種</p>
241      <select name="model" onchange="changeColor(this)">
242        <option id="example3" value="">軽自動車</option>
243        <option id="1500">軽自動車</option>
244        <option id="2000">コンパクトカー</option>
245        <option id="3000">ミニバン</option>
246        <option id="1500">セダン</option>
247        <option id="2000">クーペ</option>
248        <option id="3000">ステーションワゴン</option>
249        <option id="1500">SUV・クロカン</option>
250        <option id="2000">オープンカー</option>
251        <option id="3000">ワンボックス</option>
252      </select>
253    </div>
254
255  <div id="showLine">
256  <div class="carType_mini">
257    <img src="assets/img/nissan_dayz_roox.png">
258    <div class="lower_mini">
259     <p>デイズ　ルークス</p>
260     <input type="checkbox" id="days_roox_check" name="check"><label for="days_roox_check" class="checkbox"></label>
261    </div>
262  </div>
263  <div class="carType_mini">
264    <img src="assets/img/nissan_dayz.png">
265    <div class="lower_mini">
266     <p>デイズ</p>
267     <input type="checkbox" id="dayz_check" name="check"><label for="dayz_check" class="checkbox"></label>
268    </div>
269  </div>
270  <div class="carType_mini">
271    <img src="assets/img/nissan_clipper.png">
272    <div class="lower_mini">
273     <p>クリッパー</p>
274     <input type="checkbox" id="clipper_check" name="check"><label for="clipper_check" class="checkbox"></label>
275    </div>
276  </div>
277  </div>
278
279  <div id="optionSearch">
280    <h2>オプション検索</h2>
281    <div class="options">
282      <p>排気量　</p>
283      <select name="displacement" onchange="changeColor(this)">
284        <option id="example2" value="">660CC</option>
285        <option id="1500">1500CC</option>
286        <option id="2000">2000CC</option>
287        <option id="3000">3000CC</option>
288      </select>
289    </div>
290    <div class="mission">
291      <p>AT/MT</p>
292      <div class="toggle">
293        <input type="checkbox" name="check" />
294        <span>MT</span>
295        <span>AT</span>
296      </div>
297    </div>
298  </div>
299
300  <div class="searchButton">
301    <a href="history.html"><span>この条件で探す</span><img src="assets/img/basicArrow_#cccccc.png" alt=">"/></a>
302  </div>
303</div>
304
305<script type="text/javascript">
306'use strict';
307
308//options
309function changeColor(hoge){
310    if( hoge.value == 0 ){
311        hoge.style.color = '';
312    }else{
313        hoge.style.color = 'black';
314    }
315}
316
317//toggle switch
318$(".toggle").on("click", function() {
319  $(".toggle").toggleClass("checked");
320  if(!$('input[name="check"]').prop("checked")) {
321    $(".toggle input").prop("checked", true);
322  } else {
323    $(".toggle input").prop("checked", false);
324  }
325});
326
327</script>
328</body>
329
330</html>

試したこと

h2タグをpタグに変更してみましたが、やはりCSSが効かないようです。

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

回答2件

ベストアンサー

css
1input[type=checkbox]:checked + .checkbox::after {
2    opacity: 1;
3}
4} /* ←これのせいでは */

投稿2022/07/23 08:21

Lhankor_Mhy

総合スコア37634

直前の } が余分。

css
1input[type=checkbox]:checked + .checkbox::after {
2    opacity: 1;
3}
4} /* これが余分 これを削除すれば効くようになります */
5
6#optionSearch h2{/*0723 ここが効いていない*/

エディターは何を使ってますか。プログラミング用のエディターを使うと間違いを指摘してくれますので、このような間違いはすぐに気づきます。
私は、VSCode を使ってますが、これだと下図のように表示されます。

投稿2022/07/23 08:20

編集2022/07/23 08:27

hatena19

総合スコア34367

nitori-kun

2022/07/23 08:58

エディターはSublime Txtを使っています！なるほど！エディター変えてみます。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する