flexboxを使った時のimgの大きさの指定について

いつもお世話になってます。

質問は表題の通りです。

親要素をflexboxにして子要素のimg ３つを横並べにしています。
img の大きさは親要素の３０％にしたのですが、最初のimgだけは大きさを個別に設定したいのですがなりませんでした。

記述の仕方がおかしいのでしょうか？それとも下記コードではタグのルール上無理なのでしょうか？

phoneLogoのwidthの値を試しにpx指定にしても変わりませんでした。

その他必要な情報があれば追記しますのでおっしゃってください。

宜しくお願いします。

html
1    <div id="headerContainerRightBottom">
2            <img id="phoneLogo" src="img/pc/phone_logo.png" />
3            <img src="img/pc/mail_customer_telnum.png" />
4            <img src="img/pc/btn.png" />
5          </div>

css
1#headerContainerRightBottom{
2  display: flex;
3  justify-content: space-around;
4  align-items: flex-start;
5  width: 100%;
6}
7
8#headerContainerRightBottom img{
9  width: 30%;
10}
11
12#phoneLogo{
13  width: 10%;
14}

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

回答1件

セレクタの詳細度が悪さをしているので, :not擬似クラスで除外してやれば良いでしょう.

#headerContainerRightBottom{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
}

#headerContainerRightBottom img:not(#phoneLogo){
  width: 30%;
}

#phoneLogo{
  width: 10%;
}

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
https://developer.mozilla.org/ja/docs/Web/CSS/:not

投稿2018/04/14 05:20

defghi1977

総合スコア4756

kato00

2018/04/14 09:03

参考サイトのご提示ありがとうございます！コードの記述も頂き助かります！参考サイト、ざっと目を通したのですが、提示したコードでいうと、 #phoneLogoはIDセレクタだと思うのですが、 #headerContainerRightBottom imgは全称セレクタタイプセレクタクラスセレクタ属性セレクタ擬似クラス ID セレクタインラインスタイルの内、どれに当てはまるのでしょうか？？宜しくお願いします。