CSS :not()の使い方　特定のclassだけを指定したい。

.textだけ両側にpaddingを入れたく、notを使って以下のように記述しましたが、うまくいきません。notをどのように使えばよいのでしょうか？

<html>
<div class="contents">
      <div class="photo">
        <img src="-----" class="img-fluid">
      </div>
      
      <div class="text">
        <h2>タイトル</h2>
        <p>文書</p>
        <p>文書</p>
      </div>
      
      <div class="photo">
        <img src="-----" class="img-fluid">
      </div>
      
      <div class="text">
        <p>文書</p>
      </div>
    </div>


<css>
.img-fluid {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

1
contents:not(.photo) {
  padding-left: 10px;
  padding-right: 10px;
 }
 すべてにpaddingが入ります。
 
 2
 contents :not(.photo)または
 contents *:not(.photo) {
  padding-left: 10px;
  padding-right: 10px;
 }
 .photoにpadding-leftが入ります。
 padding-rightは入りません。

Lhankor_Mhy

2019/10/09 08:29

typo だと思います。 contents:not(.photo) ↓ .contents:not(.photo)

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

回答1件

ベストアンサー

css
1.contents>div:not(.photo) {
2  padding-left: 10px;
3  padding-right: 10px;
4}

contentsクラスの直下のdivでphotoクラスではないもの

投稿2019/10/09 08:34

yambejp

総合スコア116694

blackcoffee

2019/10/11 06:45

ありがとうございます。希望したレイアウトになりました。 .contents :not(.photo) だと子孫要素のimg要素にはpaddingが入るということですか。勉強になりました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

CSS :not()の使い方　特定のclassだけを指定したい。

関連した質問