【HTML】クラス名を複数指定すると適用されないクラスがあります...

現在プログラミングスクールでwebサイトを作成しているのですが、クラス名を複数指定した場合はCSSが適用されず、クラス名を一つしか設定しなかった場合はCSSが適用されるという現象が起きてしまっています...
以下は自分で作成したコードになります。
htmlファイルに関しましては、コードが長くなってしまう為、多少省略して掲載させて頂きました。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>CookCamp</title>
6        <link rel="stylesheet" href="cook_camp.css">
7    </head>
8    <body>
9
10
11                <article>
12
13                    <section class="main_middle_contents" >
14
15                        <div class="main_contents_title">
16                            <img src="images/icon/dish.png" align="middle"><p>今だからこそ見直したい「和食」</p>
17
18                        </div>
19                        <img src="images/contents/topics.jpg" class="topics">
20                        <div class= "middle" "clearfix">
21                            <div class="main_middle_sentense">
22                                <p>　普段、私たちが何気なく口にしている和食ですが、その基本は一汁三彩。ご飯、味噌汁、お漬物の他、主菜（魚またはお肉）
23                                    、副菜として、季節毎の野菜と豆類で構成されます。</p>
24                                <p>昔から「旬の野菜を食べましょう」といいますが、それは素材がじっくりと時間をかけて蓄積してきた旨みや栄養価が最高に
25                                    になったところでいただいて、効率よく栄養を取り風邪などの予防をしましょうね、ということです。</p>
26
27                                <p>それでは各季節毎の旬の野菜について調べてみましょう。</p>
28                            </div>
29                        </div>
30
31                        <div class="main_contents_link">
32                            <img src="images/icon/arrow.png" align="middle"><p><a href="#">続きを読む</a></p>
33                        </div>
34                    </section>
35
36
37                    <section class="under_contents">
38                        <div class="main_under_contents">
39                            <div class="main_contents_title">
40                                <img src="images/icon/dish.png" align="middle"><p>簡単！おすすめレシピ</p>
41                            </div>
42                            <img src="images/contents/pushRecipes1.jpg" class="pushRecipes1">
43                            <div class="under_sentence" "clearfix">
44                                <div class="under_main_sentence">
45                                    <p>季節の食材～春～</p>
46                                    <p>　新たまねぎに春キャベツ、新じゃが、山菜
47                                    　など・・・春の野菜は風味が良くみずみずしいのが特徴です。
48                                　　</p>
49                                    <p>それでは春野菜を使ったレシピを紹介しましょう</p>
50                                </div>
51                            </div>
52
53                            <div class="under_contents_link">
54                                <img src="images/icon/arrow.png"><p>続きを読む</p>
55                            </div>
56                        </div>
57                    </section>
58                </article>
59            </div>
60            <footer>
61
62            </footer>
63        </div>
64    </body>
65</html>
66

css
1div, .recipe_link,a,body,p,ul,li{
2    margin:0;
3    padding:0;
4}
5
6.clearfix:after{
7     content:"";
8     display:block;
9     clear:both;
10}
11.header_contents{
12     width:960px;
13     margin:0 auto;
14     border-bottom:solid 1px #BBBBBB;
15     background-color:#FFFFFF;
16     margin-top:7px;
17}
18.header_image{
19     float:left;
20}
21.top_form{
22     float:right;
23}
24.top_sentense{
25     color:#664433;
26     clear:both;
27}
28.header_contents ul{
29     list-style:none;
30}
31.header_contents ul li {
32     float:left;
33     border-left:solid 1px #BBBBBB;
34     box-sizing:border-box;
35     width:20%;
36     text-align:center;
37
38}
39
40.header_contents ul li:first-child{
41     border-left:none;
42}
43.header_contents ul li a{
44     text-decoration:none;
45     color:#664433;
46}
47.header_contents ul li a:hover{
48     color:#FF6633;
49}
50
51
52
53.wrapper{
54     background-color:#f5f5dd;
55}
56
57.main_imge{
58     display:block;
59     width:960px;
60     margin:0 auto;
61}
62.main_contents{
63
64     width:960px;
65     margin:0 auto;
66
67}
68
69nav{
70     width:200px;
71     margin-top:20px;
72}
73
74
75.recipe_link{
76     width:200px;
77     margin:0 auto;
78     float:left;
79}
80.top_recipe_list ul{
81     line-height: 37px;
82}
83.top_recipe_list{
84     background-color:#FFFFFF;
85     padding:12px 12px 12px 6px;
86     padding-bottom:5px;
87}
88.top_recipe_list p{
89     margin-left:7px;
90}
91
92.under_recipe_list ul{
93     line-height: 37px;
94}
95.under_recipe_list p{
96     margin-left:7px;
97}
98.top_recepi_title{
99     width:160px;
100     background-color:#00CC00	;
101     padding-top:4px;
102     padding-left:4px;
103     border-radius: 20px;
104     margin-bottom:6px;
105}
106
107.top_recipe_title ul{
108     clear:both;
109}
110.top_recepi_title img{
111     margin-left:10px;
112     margin-bottom:8px;
113}
114.under_recipe_list ul li img{
115     margin-left:5px;
116}
117.top_recipe_list ul li{
118
119     border-bottom:dashed 1px #BBBBBB;
120}
121.under_recipe_list {
122     background-color:#FFFFFF;
123     margin-top:15px;
124     padding:12px 12px 12px 6px;
125     padding-bottom: 5px;
126}
127.under_recipe_list ul li{
128     border-bottom:dashed 1px #BBBBBB;
129}
130
131
132.top_recepi_title p{
133     color:#FFFFFF;
134     display: inline;
135     margin-left:5px;
136}
137
138.under_recipe_list .top_recepi_titile p{
139     display:inline;
140}
141
142.recipe_link ul li{
143     list-style:none;
144
145}
146.top_recipe_list ul li:last-child{
147
148     border:none;
149}
150
151.under_recipe_list ul li:last-child{
152
153     border:none;
154}
155.recipe_link a {
156     text-decoration:none;
157     color:#000000;
158}
159.recipe_link a:hover{
160     color: #FF6928;
161}
162.recipe_link ul li p{
163
164     display:inline;
165}
166
167.main_contents_title{
168     background-color:#00CC00;
169     width:445px;
170     margin-left:7px;
171     border-radius:20px;
172     margin-top:11px;
173     padding-top:5px;
174
175}
176.main_contents_title p{
177     margin-left:8px;
178     display: inline;
179     color:#FFFFFF;
180}
181.main_contents_title img{
182     margin-left:12px;
183     margin-bottom: 9px;
184}
185.new_recipe{
186     background-color:#FFFFFF;
187     width:560px;
188     float:left;
189     margin-left:12px;
190}
191.new_recipe li{
192     list-style:none;
193     float:left;
194     margin:12px;
195     line-height:16px;
196}
197.new_recipe li:nth-child(1){
198     margin-left:18px;
199     margin-right:18px;
200}
201.new_recipe li:nth-child(2){
202     margin-right:1px;
203}
204.new_recipe li p{
205 font-size:11px;
206}
207.main_middle_contents{
208     background-color:#FFFFFF;
209     width:560px;
210     float:left;
211     margin-left:12px;
212     margin-top:20px;
213}
214.main_under_contents{
215     background-color:#FFFFFF;
216     width:560px;
217     float:left;
218     margin-left:12px;
219     margin-top:20px;
220}
221.main_middle_contents .main_contents_title{
222     margin-bottom: 12px;
223}
224.topics{
225     max-width:40%;
226     float:left;
227     margin-left:17px;
228}
229.pushRecipes1{
230  max-width:40%;
231  float:left;
232  margin-left:17px;
233}
234.main_middle_sentense{
235     width:50%;
236     float:left;
237     margin-left: 20px;
238}
239.main_middle_sentense p {
240     line-height:20px;
241}
242.main_middle_sentense p:nth-child(2){
243     margin:20px 0;
244}
245.main_contents_link{
246     float:right;
247     margin:15px 0;
248     margin-right:14px;
249}
250.main_contents_link p{
251     line-height:16px;
252     float:left;
253}
254
255.main_contents_link p a{
256     color:#fc8833;
257     text-decoration:none;
258}
259.main_contents_link img{
260     margin-right:6px;
261     float:left;
262}
263.under_main_sentence{
264     float:left;
265     width:50%;
266     margin-left: 20px;
267}
268.pushRecipes1{
269     max-width:40%;
270     float:left;
271}
272

上記のhtmlファイルの「<div class="under_sentence" "clearfix">」の部分におきまして、クラス名に「under_sentence 」「clearfix」の２つを指定した場合は、「clearfix」が適用されず以下の画像のように、クラス「under_contents_link」が回り込んでしまいます。

しかし、クラス名の「under_sentence」を取り、「clearfix」だけにした場合は回り込みが解除され、CSSにて設定しましたclearfixが恐らく適用されている状態となっております。
以下はCSSを一つしか適用しなかった場合の画像になります。

どなたかこの現象につきまして、ご解説頂けますようでしたら、よろしくお願いいたします。

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

回答1件

ベストアンサー

<div class="under_sentence" "clearfix">

指定の仕方が間違っています。上記の状態だと「clearfix」はclassの所属になっていません。単に置いてあるだけの文字列・・・不明の属性状態となっています。
複数指定したい場合は半角空白区切りで指定します。

css
1<div class="under_sentence clearfix">

投稿2018/07/24 01:01

m.ts10806

総合スコア80888

newyee

2018/07/24 01:31

早速ご回答頂き、ありがとうございます。指定の仕方を調べたのですが、全く気づけませんでした... 今後はもっと注意して、気を付けていきたいと思います...

m.ts10806

2018/07/24 01:39 編集

「css 複数指定」で調べると「複数のクラスに同じ指定をする方法｣と同時に「ひとつの要素に複数クラスを指定する方法」紹介されている記事が結構あります。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.31%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

【HTML】クラス名を複数指定すると適用されないクラスがあります...

関連した質問