nth-child(even)が奇数番目に反映される件について

前提・実現したいこと

お世話になります。
CSSでflexboxを用いて、画像とテキストをまとめたflexアイテム4つの内、２番目・４番目を逆並びにして、左右交互に並べようとしています。
親要素は"pc-col2"を使用しており、flexboxでdisplay:flex;とwrapを指定すると左に画像、右にテキストのくくりが４行できます。

今悩んでいるのは、そこから２番目と４番目のpc-col2の中の画像とテキストを交互にしたいのですが、
ソースコードの指定をすると何故か１，３番目の画像とテキストが逆になってしまいます。
そして.pc-col2:nth-child(odd)にすると希望通りのレイアウトになります。

原因、対処方法がわかる方がいらっしゃいましたら、どうぞよろしくお願いいたします。

該当のソースコード

HTML
1※HTML全体を追記します。
2　　　　<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <link rel="stylesheet" href="css/reset.css">
7    <link rel="stylesheet" href="css/style.css">
8    
9    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
10    
11    <meta name="viewport" content="width=device-width,initial-scale=1">
12    <meta name="format-detection" content="telephone=no">
13    
14    <link rel="icon" sizes="192×192" href="img/apple-touch-icon.png">
15    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
16    <title>CAT</title>
17</head>
18<body>
19    <header id="header" class="header">
20       <div class="container">
21            <nav id="gnav" class="gnav">
22                    <img src="./img/CAT-1.png" alt="header-logo" class="header-logo">
23                    <ul class="gnav-list">
24                        <li><a href="#cat1">CAT1</a></li>
25                        <li><a href="#cat2">CAT2</a></li>
26                        <li><a href="#cat3">CAT3</a></li>
27                    </ul>
28            </nav>
29       </div>
30        <div class="header-visual">
31            <h1 class="brand-logo"><img src="./img/CAT.png" alt="brand-logo"></h1>
32        </div>
33   <div class="container">
34    <div class="header-text">
35        <p class="text-title">吾輩は猫である。名前はまだ無い。</p>
36        <p>どこで生れたか頓と見當がつかぬ。<br> 何でも薄暗いじめじめした所で<br> ニヤーニヤー泣いて居た事丈は記憶して居る。<br> 吾輩はこゝで始めて人間といふものを見た。</p>
37        <p>然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。<br> 此書生といふのは時々我々を捕へて煮て食ふといふ話である。</p>
38        <p>然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。<br> 但彼の掌に載せられてスーと持ち上げられた時<br> 何だかフハフハした感じが有つた許りである。</p>
39    </div>
40   </div>
41    </header>
42    <main id="main" class="main">
43        <section id="cat1" class="cat1 section">
44       <div class="container">
45            <h2 class="heading">CAT1</h2>
46            <div class="cat1-item cat-item pc-col2">
47               <div class="cat1-img">
48                  <img src="./img/cat1-1/cat1-1@2x.png" srcset="./img/cat1-1/cat1-1@2x.png 2x, ./img/cat1-1/cat1-1.png" alt="cat1-1">
49                </div>
50               <div class="cat1-text">
51                  <p>掌の上で少し落ち付いて書生の顔を見たのが所謂人間といふものゝ見始であらう。此時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て装飾されべき筈の顔がつるつるして丸で薬罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顔の眞中が餘りに突起して居る。</p>
52               </div>
53          </div>
54           <div class="cat1-item cat-item pc-col2">
55               <div class="cat1-img">
56                    <img src="./img/cat1-2/cat1-2@2x.png" srcset="./img/cat1-2/cat1-2@2x.png 2x, ./img/cat1-2/cat1-2.png" alt="cat1-2">
57                </div>
58                <div class="cat1-text">
59                  <p>そうして其穴の中から時々ぷうぷうと烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飲む烟草といふものである事は漸く此頃知つた。此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。</p>
60                </div>
61            </div>
62           <div class="cat1-item cat-item pc-col2">
63               <div class="cat1-img">
64                    <img src="./img/cat1-3/cat1-3@2x.png" srcset="./img/cat1-3/cat1-3@2x.png 2x, ./img/cat1-3/cat1-3.png" alt="cat1-3">
65                </div>
66                <div class="cat1-text">
67                    <p>到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。</p>
68                </div>
69           </div>
70           <div class="cat1-item cat-item pc-col2">
71               <div class="cat1-img">
72                    <img src="./img/cat1-3/cat1-3@2x.png" srcset="./img/cat1-3/cat1-3@2x.png 2x, ./img/cat1-3/cat1-3.png" alt="cat1-3">
73                </div>
74                <div class="cat1-text">
75                    <p>到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。</p>
76                </div>
77           </div>
78        </div>
79        </section>
80        <section id="cat2" class="cat2 section">
81        <div class="container">
82            <h2 class="heading">CAT2</h2>
83                <div class="cat2-item cat-item  pc-col2">
84                    <div class="cat2-img">
85                        <img src="./img/cat2-1/cat2-1@2x.png" srcset="./img/cat2-1/cat2-1@2x.png 2x, ./img/cat2-1/cat2-1.png" alt="cat2-1">
86                    </div>
87                    <div class="cat2-text">
88                        <p>果てな何でも容子が可笑いと、のそのそ這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。</p>
89                    </div>
90                </div>
91                <div class="cat2-item cat-item  pc-col2">
92                    <div class="cat2-img">
93                       <img src="./img/cat2-2/cat2-2@2x.png" srcset="./img/cat2-2/cat2-2@2x.png 2x, ./img/cat2-2/cat2-2.png" alt="cat2-2">
94                    </div>
95                    <div class="cat2-text">
96                        <p>漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。</p>
97                    </div>
98                </div>
99        </div>
100        </section>
101        <aside class="aside">
102           <div class="message-text">ニヤー、ニヤーと試みにやつて見たが誰も來ない。其内池の上をさらさらと風が渡つて日が暮れかゝる。腹が非常に減つて來た。 泣き度くても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと決心をしてそろりそろりと池を左りに廻り始めた。 どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭い所へ出た。 此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。</div> 
103        </aside>
104        <section id="cat3" class="section">
105        <div class="container">
106            <h2 class="heading">CAT3</h2>
107            <div class="cat3-info">
108                <dl>
109                    <dt>2018.02.09</dt>
110                    <dd><span class="new">新着</span>縁は不思議なもので、もし此竹垣が破れて居なかつたなら、</dd>
111                </dl>
112                <dl>
113                    <dt>2018.02.09</dt>
114                    <dd><span class="new">新着</span>吾輩は遂に路傍に餓死したかも知れんのである。一樹の蔭とはよく云つたものだ。</dd>
115                </dl>
116                <dl>
117                    <dt>2018.02.09</dt>
118                    <dd><span class="new">新着</span>此垣根の穴は今日に至る迄吾輩が隣家の三毛を訪問する時の通路になつて居る。</dd>
119                </dl>
120                <dl>
121                    <dt>2018.02.09</dt>
122                    <dd><span class="new">新着</span>偖邸へは忍び込んだものゝ</dd>
123                </dl>
124                <dl>
125                    <dt>2018.02.09</dt>
126                    <dd><span class="new">新着</span>是から先どうして善いか分らない。其内に暗くなる、腹は減る、寒さは寒し、雨が降つて來るといふ 始末でもう一刻も猶豫が出來なくなつた。</dd>
127                </dl>
128            </div>
129        </div>
130        </section>
131        <aside class="aside pc-col3">
132            <div class="list-item">
133               <div class="list-title">主人は餘り口を聞かぬ人と見えた。</div>
134                <ul>
135                    <li>下女は口惜しさうに</li>
136                    <li>吾輩を臺所へ抛り出した。</li>
137                    <li>かくして吾輩は遂に此家を</li>
138                    <li>自分の住家と</li>
139                    <li>自分の住家と</li>
140                </ul>
141            </div>
142            <div class="list-item">
143               <div class="list-title">主人は餘り口を聞かぬ人と見えた。</div>
144                <ul>
145                    <li>下女は口惜しさうに</li>
146                    <li>吾輩を臺所へ抛り出した。</li>
147                    <li>かくして吾輩は遂に此家を</li>
148                    <li>自分の住家と</li>
149                    <li>自分の住家と</li>
150                </ul>
151            </div>
152            <div class="list-item">
153               <div class="list-title">主人は餘り口を聞かぬ人と見えた。</div>
154                <ul>
155                    <li>下女は口惜しさうに</li>
156                    <li>吾輩を臺所へ抛り出した。</li>
157                    <li>かくして吾輩は遂に此家を</li>
158                    <li>自分の住家と</li>
159                    <li>自分の住家と</li>
160                </ul>
161            </div>
162        </aside>
163    </main>
164    <footer id="footer" class="footer">
165        <div class="container">
166            <img src="./img/CAT.svg" alt="cat" class="footer-img">
167            <p>copyright 2018 Iam a cat</p>
168        </div>
169    </footer>
170
171</body>
172</html>
173

HTML
1            <div class="pc-col2">
2               <div class="item-img">
3                <img src="img.png" alt="image"></div>
4                <div class="item-text">
5                <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p></div>
6          　</div>
7            <div class="pc-col2">
8               <div class="item-img">
9                <img src="img.png" alt="image"></div>
10                <div class="item-text">
11                <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p></div>
12         　 </div>
13             <div class="pc-col2">
14               <div class="item-img">
15                <img src="img.png" alt="image"></div>
16                <div class="item-text">
17                <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p></div>
18         　 </div>
19            <div class="pc-col2">
20               <div class="item-img">
21                <img src="img.png" alt="image"></div>
22                <div class="item-text">
23                <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p></div>
24         　 </div>

CSS
1　　　　　
2　　　　@media screen and (min-width:768px) {
3　　　　　.pc-col2 {
4       　　　 display: flex;
5       　　　 flex-wrap: wrap;
6    　　　　}
7    　　　.pc-col2:nth-child(even) {
8    　　　flex-direction: row-reverse;
9    　　　　}
10　　　　　}
11

試したこと

.pc-col2:nth-child(even)を.pc-col2:nth-child(odd)に変更→なぜか偶数番目に反映されました。
Crhomeの検証機能で確認したところ、.pc-col2:nth-child(even)のとき示している箇所は１番目３番目でした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

otn

2019/09/22 14:21

どこかで間違えていますので、現象の起こるHTML全体を載せてください。

rism

2019/09/22 15:02

HTMLを追記しました。最初の質問のソースコードは一部抜粋をしていたため、全体だと他のクラス名も付いていたりします。お手数をおかけしますが、ご確認のほどよろしくお願いいたします。

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

回答2件

他の回答にある通り、:nth-childは、すべての兄弟要素の中での順番で判断されます。

（以下、間違い）

~~.pc-col2の中で偶数番目・奇数番目を判断したい場合、.pc-col2:nth-of-type(even)という書き方があります。~~

投稿2019/09/22 22:33

編集2019/09/23 02:55

maisumakun

総合スコア145965

kei344

2019/09/23 02:51 編集

nth-of-typeは「.pc-col2の中で」ではなく「兄弟要素の中の同一の要素型の中で」ではないでしょうか。

maisumakun

2019/09/23 02:56

nth-of-typeをエレメント以外のセレクタには適用できなかったようです。失礼しました。 https://drafts.csswg.org/selectors-3/#nth-of-type-pseudo

rism

2019/09/23 09:11

kei344様、maisumakun様回答・補足をいただきありがとうございます。教えていただいた通り、:nth-childのカウントされる範囲を間違えていたようです。兄弟要素の中の特定の要素に対して指定したい場合は、.pc-col2␣特定の兄弟要素:nth-child(even)にする必要があると判断し、display:flex;を指定する部分をul要素にして、flexアイテムをli要素にすることで偶数番目に反映させることができました。こちらは初心者向けの模写サイトで、ここのエラーでかなり時間を使ってしまったので、解決して良かったです。お忙しいところご対応いただき、本当に有難うございました。

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

ベストアンサー

h2がその兄弟中の最初の子ノードで、その次のdivは2番目の子ノードです。

pc-col2のdivだけの順番で偶数奇数を合わせたいなら、pc-col2のdivだけを含んだdivを作るのでしょうか。

投稿2019/09/22 15:24

編集2019/09/22 15:30

otn

総合スコア85882

rism

2019/09/22 17:05

ご回答いただき有難うございます。試しにh2をコメントアウトして消してみたところ、きちんとevenが偶数番目に反映されました。追加で質問させていただきます。これは.pc-col2というflexコンテナにnth-childを指定すると、その前のh2タグもカウントされているということでしょうか？また「pc-col2のdivだけを含んだdivを作る」　ということで、imgとpの外側に、独立したdiv.pc-col2を作り、更にその外側に空divをおいてみましたが、うまくいきませんでした。私の解釈が間違っていると思います。追加でアドバイスいただけると幸いです。どうぞよろしくお願いいたします。

otn

2019/09/22 23:12

nth-childは、その兄弟ノードの全体の中での順番です。タグ名は関係あません。私の書いた案は、 <h2>～<h2> <div class="新規に作ったもの"> <div class="pc-col2">～～～</div> <div class="pc-col2">～～～</div> </div> ということですが、他の回答にあるnth-of-typeを使ったほうが簡単ですね。

rism

2019/09/23 11:16 編集

追加で回答をいただきありがとうございます。教えていただいた通り、:nth-childのカウントされる範囲を間違えていたようです。兄弟要素の中の特定の要素に対して指定したい場合は、.pc-col2␣特定の兄弟要素:nth-child(even)にする必要があると判断し、display:flex;を指定する部分をul要素に、flexアイテムをli要素にすることで偶数番目に反映させることができました。こちらは初心者向けの模写用サイトで、さっそくつまずいてしまったので、解決して嬉しいです。引き続き頑張っていきたいと思います。お忙しいところ、ご対応いただき有難うございました。

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

あなたの回答