タグ

ブックマーク / gotohayato.com (1)

  • CSS でクラス指定の無い要素にのみスタイルを適用する方法

    CSS の小ネタです。 CSS で class 属性での指定が無い要素にのみスタイルを付ける方法についてです。 この方法はハックでも何でも無いのですが、個人的には目からウロコでした。 これを使うと、規模が大きめのサイトの CSS で起こりがちな「スタイルリセット地獄」を回避でき、 CSS のメンテナンス性を高めることができます。 やり方 CSS でクラス指定の無い要素にのみスタイルを適用したい場合は、セレクタに :not([class]) を使えば OK です。 メリット この方法のメリットを、サンプルを使いながら説明してみます( CSS だと冗長なので、コードには SCSS を使用します)。 例として、リスト要素に次のようなスタイルを適用したい場合を考えましょう。 デフォルトのスタイル: 先頭のマークが赤色のドット。左マージンは小さめ。 item-list というクラスの付いたスタイル:

    CSS でクラス指定の無い要素にのみスタイルを適用する方法
    sachiko-kame
    sachiko-kame 2020/02/06
    "クラスなしにclassを適応する"
  • 1