要素の左右の振り分けについておしえてください。

サイトのコーディングをしています。
要素を左右に振り分けたいのですが、
.concept:nth-of-type(odd){
float:left;
}

.concept :nth-of-type(even){
float:right;
}
というコードを書いても効きません。
下記の2点についてご教授願います。
上から１個目と３個目の青色のブロックを右側に配置。
上から２個目と４個目の文章構成の部分を右側に配置。

HTML
1<section class="main-concept">
2<div class="concept">
3 <h1>1</h1>
4 <h2>モバイルレスポンシブ<br>
5 <span class="subtitle">Mobile Responsive</span>
6</h2>
7<p>Xeory Extensionはレスポンシブデザインを採用しています。スマートフォンやタブ<br>
8  レットなど各種デバイスで表示が最適化されます。</p>
9<a href="#">詳細をみる</a>
10</div>
11
12<div class="thema-concept">
13  <h3>テーマコンセプト</h3>
14</div>
15
16
17
18<div class="concept">
19 <h1>2</h1>
20 <h2>HTML5デザイン<br>
21 <span class="subtitle">HTML5 Design</span>
22</h2>
23<p>Xeory Extensionは最新のHTML5言語でデザイン及びコーディングがなされ<br>
24  ています。時代遅れのソースからは卒業しましょう。</p>
25<a href="#">詳細をみる</a>
26</div>
27
28<div class="thema-concept">
29  <h3>テーマコンセプト</h3>
30</div>
31
32
33<div class="concept">
34 <h1>3</h1>
35 <h2>SEO最適化<br>
36 <span class="subtitle">Search Engine Optimized</span>
37</h2>
38<p>Xeory ExtensionはGoogleのSEOガイドラインに可能な限り沿った構造になって<br>
39  います。必要なのは良質なコンテンツだけです。</p>
40<a href="#">詳細をみる</a>
41</div>
42
43<div class="thema-concept">
44  <h3>テーマコンセプト</h3>
45</div>
46
47
48<div class="concept">
49 <h1>4</h1>
50 <h2>高いカスタマイズ性<br>
51 <span class="subtitle">Customizable</span>
52</h2>
53<p>Xeory Extensionはカスタマイズフリーです。CSS, HTML, PHP の知識があ<br>
54  れば自由にカスタマイズすることができます。。</p>
55<a href="#">詳細をみる</a>
56</div>
57
58<div class="thema-concept">
59  <h3>テーマコンセプト</h3>
60</div>
61</section>
62
63</section>
64

css
1.main-concept{
2  width: 1050px;
3  margin-left: auto;
4  margin-right: auto;
5}
6
7 .concept{
8  width: 630px;
9  height: 350px;
10}
11
12.concept h1{
13  width: 30px;
14  height: 60px;
15  background-color: #00cc00;
16  font-size: 18px;
17  color: #ffffff;
18  font-weight: normal;
19  text-align: center;
20  line-height: 80px;
21}
22
23.concept h2{
24  font-size: 34px;
25  font-weight: normal;
26  line-height: 0.8;
27  color: #00cc00;
28}
29
30.concept a{
31  text-decoration: none;
32  font-size: 14px;
33  background-color:#FF9900;
34  color: #ffffff;
35  display: block;
36  width: 180px;
37  height: 40px;
38  text-align: center;
39  line-height: 40px;
40  border-radius: 10px;
41}
42
43
44
45.thema-concept h3{
46  background-color: skyblue;
47  font-size: 36px;
48  font-weight: normal;
49  width: 300px;
50   height: 300px;
51  color: #ffffff;
52  text-align: center;
53  line-height: 300px;
54
55}
56
57.concept:nth-of-type(odd){
58  float:left;
59}
60
61 .concept :nth-of-type(even){
62  float:right;
63}

yoshinavi

2019/09/08 03:19

セレクタ名に余分なスペース等ありませんか？見直してみてください。

taki_WEAR

2019/09/08 03:28

余分なスペースはないと思いますが、ありましたらご指摘頂けないでしょうか？

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

回答2件

「:nth-of-type」の使い方をもう一度確認してみてください。

確認方法の例）
分かりやすくそれぞれに色を付けてみる。

CSS
1.concept:nth-of-type(odd){
2  float:left;
3  background-color: red;
4}
5
6.concept:nth-of-type(even){
7  float:right;
8  background-color: blue;
9}