要素指定の方法が分かりません

Question

下記のようなメディアクエリでsvgファイルの大きさを変えたいと思っているのですが、幅が変更されませんでした。

@media only screen and (min-width:450px) and (max-width:806px) {
  .company-mv-image svg{
      width: 75%;
  }
}

下記のコードが実際にvscodeで入力したHTMLです。

<div class="company-mv-left col-lg-4">
        <div class="company-mv-image">
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
          <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_mamd97r8.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>
        </div>
      </div>

検証モードで見ると以下のような構造になっています。

<div class="company-mv-left col-lg-4">
        <div class="company-mv-image">
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
          <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_mamd97r8.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop="" autoplay=""></lottie-player>
<div class="main">
 <div class="class="animation" style="background:transparent">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3500 3500" width="3500" height="3500" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
  </svg>
 </div>
</div>
        </div>
      </div>

下記のようなクラス指定だと、他のanimetionクラスの画像も変わってしまうので困りました。

.animation svg {
  width:75%;
}

よろしくお願いします。

Answer 1

style直指定だと通常上書きできないです。
仕方ないんで苦肉の策でimportant使うくらいじゃないですかね？これで動くのかは未検証

@media only screen and (min-width:450px) and (max-width:806px) {
  .company-mv-image svg{
      width: 75% !important;
  }
}

Comments

[takawork]

importantでも動きませんでした。基礎的な質問なのですが、.company-mv-image svgってスタイル指定の方法が合ってますか？一個上のクラスじゃないとセレクタの絞り込みが出来ないかと思っていたのですが、これは勘違いでしたでしょうか？(.animation svg {}じゃないとだめなのではないか？という質問です。)要素を飛び越えての絞り込みが可能なのかちょっとまだあやふやなので、お答え頂けると助かります。

[takawork]

現状としては頂いたcssを導入してみたのですが、検証モードで.company-mv-image svg{
width: 75% !important;
}が×ではなく、そもそも表示されていませんでした。

[sousuke]

.company-mv-image svg{}の
imageとsvgの間に半角スペースがあるのならそれは子孫セレクタといって.company-mv-imageの中にある全てのsvgに対してそのスタイルが有効です。間違っているとは思えません。質問者さんの言っているような一個上の親から指定する場合は子セレクタといって
.animation > svg{}
こう書きます。

[takawork]

なるほど、分かりやすい回答ありがとうございます。今まで半角スペースを入れたものとそうでないものをごっちゃにしていました。

Answer 2

@media only screen and (min-width:450px) and (max-width:906px) {
  .company-mv-image lottie-player{
      width: 100px !important;
  }
}

このようなスタイル指定でなんとかwidthを変更するとが出来ました。
回答頂いた方、ありがとうございます。

Comments

[miyabi_pudding]

sousukeさんの回答と全く同じ手法ですので、そちらが先なので、
自己解決投稿で解決は不適切です。
（もし違うと言うなら、構文コピペでしか判断していないと他の人から思われてもしかたない）

[sousuke]

パーセントが効かないパターンはあることはあると思うけどimportantで表示すらされないっていうのが気になる。もともと
.animation svg{}の指定でもスタイル直接は上書きできないはずだしhtmlほんとにあってる？

Answer 3

style="width: 100%;
のように、属性による、インナースタイルが入っている場合、そちらが優先されます。
外しましょう。

Comments

[takawork]

回答ありがとうございます。807px以上の時はwidth: 100%の大きさが丁度良い大きさで、806px以下の時に幅を変更したいと思っています。あと実際に私がコードを触ってる部分は以下の部分のみなので、インナースタイルを外すことが出来ません。
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_mamd97r8.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>