0

cssのスタイルで、paddingの属性を削除したいです。
最初にcssの初期化としてbase.scssを読みます。
その後にarticle.scssを読みます。
その時に、article.scssでbase.scssのulのpaddingを削除したいのですが、cssでのやり方ご存知の方いましたら教えていただきたいです。
説明が下手で申し訳ないのですが、よろしくお願いいたします。

base.scssファイル

html {
  body {
    margin: 0;
    padding: 0;
    ul {
      margin: 0;
      padding: 0;
    }
  }
}

article.scssファイル

article{
  .rich-text{
    ul{
      padding: ""; ←ここでbase.scssファイルのpaddingを削除(打ち消し)したいです。
    }
  }
}

(補足)
写真のように「・リスト(ul)」と「numberリスト(ol)」の左端を合うようにしたいです。
「numberリスト」に合わせる形になります。
写真のデベロッパーツール のpaddingの部分でチェックボタンを外すと「・リスト(ul)」が「numberリスト(ol)」の左端と合うようになりました。なのでpaddingを消したいと思っています。

(現状)
画像の説明をここに入力

(理想)
画像の説明をここに入力

2 件の回答 2

1

article .rich-text の子孫にある ul 要素への padding プロパティの値だけ初期値を取りたいということであれば、 revertを用いることで実現出来ます。revertcascade オリジンによって動作が変わります。次のコードのように、作者オリジンのスタイルへ revert 値が設定された場合は、もしユーザオリジンのスタイルがあればそれを使用し、なければユーザーエージェントスタイルシートを用います。

§ 7.3.4. Rolling Back The Cascade: the revert keyword[1]

If the cascaded value of a property is the revert keyword, the behavior depends on the cascade origin to which the declaration belongs:

  • user-agent origin
    Equivalent to unset.
  • user origin
    Rolls back the cascaded value to the user-agent level, so that the specified value is calculated as if no author-origin or user-origin rules were specified for this property on this element.
  • author origin
    Rolls back the cascaded value to the user level, so that the specified value is calculated as if no author-origin rules were specified for this property on this element. For the purpose of revert, this origin includes the Animation origin.

html body {
  margin: 0;
  padding: 0;
}

html body ul {
  margin: 0;
  padding: 0;
}

article .rich-text ul {
  padding: revert;
}
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>
<ol>
  <li>項目1</li>
  <li>項目2</li>
</ol>

<article>
  <div class="rich-text">
    <ul>
      <li>項目1</li>
      <li>項目2</li>
    </ul>
  </div>
</article>


最終的な SCSS は次のようになります。

base.scss

html {
  body {
    margin: 0;
    padding: 0;
    ul {
      margin: 0;
      padding: 0;
    }
  }
}

article.scss

article {
  .rich-text {
    ul {
      padding: revert;
    }
  }
}
1
  • supa様 今回はsupa様の方法で解決できました。大変助かりました。ソースまで提示していただき、ありがとうございました!
    – user19213
    Commented 2020年12月8日 6:15
1

初めまして。
結論から申し上げますと、既に追加したCSSのプロパティを削除する方法はありません。

まず初めに理解をしていただきたいのは、
CSSの初期化というのはChromeやFirefoxなどのブラウザ間での差異を無くすため作業です。

CSSは仕組み上、削除は出来ないですが、色々やり方は工夫できます。
・クラス名にCSSを指定する
・後から読み込むファイルでCSSを上書きする

1
  • masaru514様 まだまだcss触りたてでしたので大変勉強になりました。ご回答大変助かりました。ありがとうございました!
    – user19213
    Commented 2020年12月8日 6:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。