画像と文字の位置を反対にしたい

前提・実現したいこと

模写コーディングをしていて二番目のテキストと画像を反対にしようとしたらエラーが発生した。

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

flex-direction:row-revers;をしていしたら、思ったように反応しなかった。

該当のソースコード

html
1 <ul  class="feature-list">
2                <li class=" feature-list__block feature-block">
3                    <h3>テキスト</h3>
4                    <div class="feature-block__wrapper feature-hover">
5                        <p class="feature-block__image"><img src="" alt=""></p>
6                        <div class="feature-block__texts">
7                            <h4>テキスト</h4>
8                            <p>テキスト</p>
9                        </div>
10                    </div>
11                </li> 
12
13                <li class=" feature-list__block feature-block">
14                    <h3></h3>
15                    <div class="feature-block__wrapper feature-hover">
16                        <p class="feature-block__image"><img src="" alt=""></p>
17                        <div class="feature-block__texts">
18                            <h4>テキスト</h4>
19                            <p>テキスト</p>
20                        </div>
21                    </div>
22                </li> 
23
24                <li class=" feature-list__block feature-block">
25                    <h3>テキスト</h3>
26                    <div class="feature-block__wrapper feature-hover">
27                        <p class="feature-block__image"><img src="" alt=""></p>
28                        <div class="feature-block__texts">
29                            <h4>テキスト</h4>
30                            <p>テキスト</p>
31                        </div>
32                    </div>
33                </li> 
34
35            </ul>
36

css
1 .feature-block{
2        text-align: center;
3        
4    }
5
6    .feature-block__wrapper{
7        display: flex;
8        flex-direction: column;
9
10
11    }
12
13.feature-block__wrapper:nth-child(even){
14    flex-direction: row-reverse;
15}
16
17    
18
19
20    .feature-block h3{
21        text-align: left;
22        font-size: 25px;
23    
24        
25        
26    }
27
28    .feature-block__texts{
29        border: 2px dashed #333333;
30               
31    }
32
33    .feature-block__texts h4{
34        font-size: 18px;
35        
36        
37    }
38
39
40
41    .feature-block__image{
42        text-align: left;
43    }
44

試したこと

色々ためしたが改善しなかった

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

なし

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

回答2件

ベストアンサー

:nth-child()は兄弟要素同士で有効です。

'.feature-block__wrapper'はその親ブロック内に一つしかないので、兄弟はいません。常に一番目の要素になります。よって:nth-child(even)を付けても無意味です。

親の.feature-list__blockに:nth-child(even)を付けてから、その子をセレクトするようにすればいいでしょう。

css
1.feature-block__wrapper{
2  display: flex;
3  flex-direction: row; /* 修正 */
4}
5
6.feature-list__block:nth-child(even) .feature-block__wrapper{ /* セレクタ修正 */
7  flex-direction: row-reverse;
8}