72398


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

**base.scssファイル**

[code]

    html {
      body {
        margin: 0;
        padding: 0;
        ul {
          margin: 0;
          padding: 0;
        }
      }
    }
    
[/code]

**article.scssファイル**

[code]

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

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

**（現状）**  
[![画像の説明をここに入力](https://i.stack.imgur.com/alfti.png)](https://i.stack.imgur.com/alfti.png)

**（理想）**  
[![画像の説明をここに入力](https://i.stack.imgur.com/vhkkF.png)](https://i.stack.imgur.com/vhkkF.png)


CC BY-SA 4.0
2020-12-04T06:50:08.110
72392
2020-12-05T12:05:32.957
2020-12-05T12:05:32.957
32986
19213
question
css sass
cssで属性を削除する方法を知りたいです。


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

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

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


CC BY-SA 4.0
2020-12-04T07:19:27.313
72393
2020-12-04T07:19:27.313
42994
72392
answer


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

> ### § 7.3.4. Rolling Back The Cascade: the revert
> keyword[[1]](https://drafts.csswg.org/css-cascade/#inherit-initial)
>
> 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.
>

[code]

    html body {
      margin: 0;
      padding: 0;
    }
    
    html body ul {
      margin: 0;
      padding: 0;
    }
    
    article .rich-text ul {
      padding: revert;
    }
[/code]

[code]

    <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>
[/code]

* * *

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

**`base.scss`**

[code]

    html {
      body {
        margin: 0;
        padding: 0;
        ul {
          margin: 0;
          padding: 0;
        }
      }
    }
    
[/code]

**`article.scss`**

[code]

    article {
      .rich-text {
        ul {
          padding: revert;
        }
      }
    }
    
[/code]


CC BY-SA 4.0
2020-12-04T11:18:30.080
72398
2020-12-05T12:05:17.263
2020-12-05T12:05:17.263
32986
32986
72392
answer