flex-directionにおける横並びが成功しない。

実現したいこと

下記の動画の、1:41:29にあるCSSによる偶数で横並び指定をしたいのだが、できない。

[リンク内容](https://www.youtube.com/watch?v=h5xxHuvYy_I）

発生している問題・分からないこと

.item:nth-child(even){
flex-direction: row-reverse;
}

を入力したが、CSSの結果が反映されない。
エラーコードは見つからないが、ちゃんと偶数で横並びにならないので困っている。

エラーメッセージ

エラーコードはないが、 flex-direction: row-reverse;の結果が反映されない。
使っているブラウザは、Brave v 1.65.133で、Visual Studio Code書いている。


### 該当のソースコード

```sample01.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox</title>

  <link rel="stylesheet" href="css/style02.css">
</head>

<body>
  <div class="container">
    <div class="item">
      <img src="https://picsum.photos/id/334/300/200">
      <div class="item__content">
        <p>ニューヨーク市（ニューヨークし、英: New York City）は、アメリカ合衆国のニューヨーク州にある都市。 1790年以来、同国最大の都市である。 市域人口は800万人を超え、都市圏人口では定義にもよるが2,000万人以上である。</p>
      </div>
    </div>  
</div>

    <div class="container">
      <div class="item">
        <img src="https://picsum.photos/id/911/300/200">
        <div class="item__content">
          <p>ニューヨーク市（ニューヨークし、英: New York City）は、アメリカ合衆国のニューヨーク州にある都市。 1790年以来、同国最大の都市である。 市域人口は800万人を超え、都市圏人口では定義にもよるが2,000万人以上である。</p>
        </div>
      </div>  
    </div>

    <div class="container">
      <div class="item">
        <img src="https://picsum.photos/id/921/300/200">
        <div class="item__content">
          <p>ニューヨーク市（ニューヨークし、英: New York City）は、アメリカ合衆国のニューヨーク州にある都市。 1790年以来、同国最大の都市である。 市域人口は800万人を超え、都市圏人口では定義にもよるが2,000万人以上である。</p>
        </div>
      </div>  
    </div>

    <div class="container">
      <div class="item">
        <img src="https://picsum.photos/id/511/300/200">
        <div class="item__content">
          <p>ニューヨーク市（ニューヨークし、英: New York City）は、アメリカ合衆国のニューヨーク州にある都市。 1790年以来、同国最大の都市である。 市域人口は800万人を超え、都市圏人口では定義にもよるが2,000万人以上である。</p>
        </div>
      </div>  
    </div>
</body>
</html>

style02.css
1@import url(destyle.css);
2
3.container{
4  display: flex;
5  flex-wrap:no-wrap;
6  max-width: 1024px;
7  margin: 0px auto;
8  padding: 20px;
9}
10
11.item{
12  
13  display: flex;
14  flex-wrap:no-wrap;
15  align-items: center;
16  background-color: #eee;
17  margin-bottom: 20px;
18  
19}
20
21.imag:nth-child(even){
22   flex-direction: row-reverse;
23}
24
25.item img{
26  flex-basis: 50%;
27}
28
29.item__content{
30  padding: 20px;
31  flex-basis: 50%;
32}
33
34@media (max-widht: 640px) {
35  .item {
36    flex-direction: column !important;
37    align-items: stretch;
38  }
39}
40
41
42
43
44### 試したこと・調べたこと
45- [x] teratailやGoogle等で検索した
46- [x] ソースコードを自分なりに変更した
47- [ ] 知人に聞いた
48- [x] その他
49
50##### 上記の詳細・結果
51これらの記事をもとに一度、他のファイルで作ってみたが、めんどうなのでやめた。（コピペしただけなのに、余計なエラーも確認されたので）
52
53
54
55
56【コピペOK】左右交互flexレイアウトの作り方【左右逆Verあり】
57
58https://morilynblog.com/right-left-alternate-layout/
59
60（CSSで画像と文字を左右交互に配置する方法【display:flex）
61
62（display:flexが効かない・横並びにならない原因と修正方法）
63
64今はこの記事を中心にエラーを解決しようと思う。
65
66https://csshtml.work/displayflex-kuzure/#1displayflex
67
68https://takechi-web.com/css-alternate/
69
70### 補足
71特になし

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

回答2件

css
1.imag:nth-child(even){

.imag ではなく .item でしょう。

それと、 :nth-child(even) にマッチさせるためには、単一の container の中に複数の item を入れる構造にするべきかと思います。

html
1  <div class="container">
2    <div class="item">
3      <img src="https://picsum.photos/id/334/300/200">
4      <div class="item__content">
5        <p>ニューヨーク市（ニューヨークし、英: New York City）は、...</p>
6      </div>
7    </div>  
8
9    <div class="item">
10      <img src="https://picsum.photos/id/334/300/200">
11      <div class="item__content">
12        <p>ニューヨーク市（ニューヨークし、英: New York City）は、...</p>
13      </div>
14    </div>  
15
16    ....