クラスを持たないタグにスタイルを適用したい

サイトのスタイルを変更したいとき、通常はclass名を探しますよね。たまにclass名がない場合があります。筆者はちょうど今週それに遭遇したので、class名のないタグにどのようにスタイルを書くか簡単に説明します。

タグ名で指定

すべての特定のタグを持つ要素に対して同じスタイルを適用したい場合。

例: すべての段落（<p>タグ）にフォントサイズを設定する。

p {
  font-size: 16px;
}

CSS でクラス指定の無い要素にのみスタイルを適用したい場合は、セレクタに :not([class]) を使えばいいです。

p:not([class]) {
  font-size: 16px;
}

これはちょっど危ないと思います。なぜなら、どのページでこのタグが使われているかわからないかもしれません。

要素の特定の状態や特性に基づいてスタイルを適用したい場合。

例: テキストボックスがフォーカスされたときに、borderの色を変更する。

input[type="text"]:focus {
  border-color: blue;
}

特定の親要素の子要素にスタイルを適用したい場合。

例: ナビゲーションメニューのリストアイテムを横並びにする。

nav > ul > li {
  display: inline-block;
}

ある要素の直後にある兄弟要素にスタイルを適用したい場合。

例: 見出しの直後にある段落のフォントサイズを変更する。

h1 + p {
  font-size: 18px;
}

いくつかの方法は適用範囲が広すぎて、目標タグ以外のものに変更が及んでしまう可能性があります。もし、変更したいタグにclassがなく、代わりにstyle属性がある場合、以下の方法を試してみてください。

特定の属性を持つ要素にスタイルを適用したい場合。

例: スタイル属性で設定された幅や高さなどの特定のスタイルを持つ<div>要素を非表示にする。

div[style="width: 100%; height: auto; clear: both; text-align: center;"] {
  display: none;
}

もしご質問やご不明な点、誤字脱字などございましたら、お気軽にお問い合わせください。今後の記事作成にも役立たせていただきます。