html超基本

超基本的なことなのですがうまく調べられなかったので教えてください。
下記のようにhtmlでimg を入れて、それをcssで調整したいのですが、
いちいちimgだけをdivで囲ってあげないといけないのでしょうか？
html
<div class="hand">
<p>テキスト</p>
<img src="images/hand.jpg" width="90%" alt="手">
</div>

css
.hand img{ }
で指定できません。

とすると、
<div class="hand">
<p>テキスト</p>
<div class="hand-img">
<img src="images/hand.jpg" alt="手">
</div>
</div>

と、divだらけになってしまうのですが、これしか方法はないのでしょうか？

No.3 回答者： naokita 回答日時： 2020/11/11 21:16

それでも出来るはずですけど、どこかでミスがあるのでしょう。

そこのDIVは不要で、DIVは必要最低限で利用すれば良いです。

<p>テキスト</p>
<img src="images/hand.jpg" alt="手" class="hand">

<p>テキスト<br>
<img src="images/hand.jpg" alt="手" class="hand">
</p>

css
.hand{border:10px solid red;}
でも指定できるし、
img.hand{border:10px solid blue;}
でも良いわけで、
細かく指定したければ、セレクタや詳細度を学ぶ事です。

No.2 回答者： bx2 回答日時： 2020/11/11 13:46

＞いちいちimgだけをdivで囲ってあげないといけないのでしょうか？

不要です。


＞と、divだらけになってしまうのですが、これしか方法はないのでしょうか？

他に良い方法があります。


まだ初心者にもなっていないレベルなので、これから勉強すればよいです。

・セレクタの種類
http://www.htmq.com/csskihon/005.shtml

・意外と知らない!?CSSセレクタ20個のおさらい
http://weboook.blog22.fc2.com/blog-entry-268.html

No.1 回答者： fujillin 回答日時： 2020/11/11 10:31

こんにちは

＞.hand img{ }
＞で指定できません。
できるはずですけれど？

試しに、
.hand img{ border:10px solid red; }
などにしてみても、表示は変わりませんか？

他のCSS指定で、打ち消すような記述があれば別ですけれど・・・