このアイデアはすごい！テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック

サイト構築 -CSS

Post on:2025年5月20日

sponsors

テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。

実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。

テーブルでセルの行を強調表示し、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック

まずは、実際のデモをご覧ください。
上部でダーク・ライトモードにしたり、アクセントカラーを変更できます。

See the Pen
Focus table rows with :not(:focus-within) by coliss (@coliss)
on CodePen.

HTMLは、普通のテーブルです。

      <table role="grid">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Email</th>
            <th>Subscription</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/female/512/40.jpg" alt=""/></td>
            <td><input aria-label="name" type="text" value="Emily Hoffman" /></td>
            <td><input aria-label="email" type="email" value="emhoff3245@msn.com" /></td>
            <td>Paid</td>
          </tr>
          ...
        </tbody>
      </table>

<thead>

<tr>

<th>Email</th>

<th>Subscription</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

...

</tbody>

</table>

それ以外のセルをぼかしてより目立たせるCSSは、下記の通り。

table:focus-within tbody tr:not(:focus-within) {
  filter: blur(4px) saturate(0.2);
  opacity: 0.5;
}

table:focus-within tbody tr:not(:focus-within) {

filter: blur(4px) saturate(0.2);

opacity: 0.5;

}

:focus-within疑似クラスはその要素または子孫要素にフォーカスがある場合に一致し、tr:not()でそれ以外のセルに対して、ぼかしや不透明度を適用します。

:not()否定疑似クラスについて詳しくは、下記をご覧ください。

否定疑似クラス「:not」の便利な使い方と使う時の注意点

元ネタは、下記ポストより。

more CSS <table> tricks

highlight the row being edited and blur out the distractions

table:focus-within tbody tr:not(:focus-within) {
filter: blur(4px) saturate(0.2);
opacity: 0.5;
}

bonus: color-mix for accent coloring https://t.co/EwGVOkS8HO pic.twitter.com/MY04KGZby3

— jhey ▲ (@jh3yy) May 3, 2025