プログラム自学案内の7回目です。前回の記事ではCSSファイルとCSS属性のいくつかを紹介しました。今回はCSSセレクタ（CSS Selector）を案内します。CSSセレクタのコーディングには、パズル的なところがあり、意外と面白いです。 準備：簡単なHTMLファイルと空 ...

CSS 2.1と比べて、CSS 3には多数のセレクタが追加されている。そのひとつに属性セレクタがある。CSS 2.1では完全一致による指定しかできなかったが【1】、CSS 3では部分一致での指定が可能になった【2】。これにより、リンク先がPDFファイルの場合にPDF ...

スタイルの適用先を指定する「セレクタ」には、様々な条件で対象を絞り込める書き方が用意されています。うまく活用すれば、いちいちHTML側にclass属性やid属性で名前を割り振らなくても、CSS側だけで柔軟に適用先を限定できます。 です(※)。「セレクタ ...

チャイルドセレクタ（Child Selector）を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。 スタイルシートは超軽量で、下記のコードで全部です。 実装は、非常にシンプルで簡単です。 3カラムのグリッド ...

CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記の ...

Type Selector（タイプセレクタ）: 指定したHTMLのタグ名に一致するすべての要素を選択します。ドキュメント全体のベースとなるタイポグラフィや余白の初期化など、広範囲なスタイリングに利用されます。 Class Selector / ID Selector（クラス / IDセレクタ）: class属性 ...

CSSの「セレクタ」の書き方 再入門（CSS3対応版）(2ページ目) スタイルの適用先を指定する「セレクタ」には、様々な条件で対象を絞り込める書き方が用意されています。うまく活用すれば、いちいちHTML側にclass属性やid属性で名前を割り振らなくても、CSS側 ...

first previous active last以外の要素にスタイルを適用したい。こういう場合、:not()セレクタを使って指定を除外するが、複数指定する場合も同様に:not()セレクタを使う。 使用方法 Selectors Level 3 では、:not(.first, previous)ように続けて指定できない。 以下のように:not ...

要素名[属性]と記述すると、指定した属性を持つ要素にスタイルを適用する「属性セレクタ」となります。CSS3における属性セレクタの意味と使い方やサンプルコード、使用例について解説します。 記事全文はできるネットの指定した属性を持つ要素に ...