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

サイトのスタイルを変更したいとき、通常は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;
}