CSSでレスポンシブ時に疑似要素を無効にしたい

Question

前提

CSSでレスポンシブ時に疑似要素を無効にするにはどうすればよいでしょうか。

実現したいこと

hoge{
  padding: 100px;
}

hoge:first-child{
  padding: 50px;
}

上記のCSSでレスポンシブ時にhoge:first-childの指定を無効にし、全てのhogeのpaddingを100pxにしたい場合、メディアクエリにはどのように記述すればよいでしょうか。

試したこと

@media screen and (min-width){
   hoge:first-child{
    padding: 100px;
 }
}

上記のようにしていますが、もっと良い書き方はないでしょうか。

Answer 1

before/afterの疑似要素はcontent: noneで無効にできます。

@media screen and (min-width){
  hoge:first-child{
    padding: 100px;
  }

  hoge:first-child::before,
  hoge:first-child::after {
    content: none;
  }
}

Comments

[yuyuyuyupanda]

ご回答ありがとうございます。

この場合 content: none;とするだけではなく、メディアクエリでも再度 padding: 100px;を指定する必要があるのでしょうか。

[Cocode]

ありますー！

通常時first-childのpadding: 50pxにしているので、メディカクエアリ時は100pxにする必要があります！

[yuyuyuyupanda]

なるほど、、わかりやすい説明ありがとうございます