【CSS Modules】:not疑似クラスの使い方

:not()関数は、指定されたセレクターに一致しない要素を選択するために使用するCSSの擬似クラス関数です。この関数は、引数として1つ以上のセレクターリストを取り、そのリストに含まれるいずれかのセレクターに一致する要素を、スタイル適用対象から除外する機能を提供します。

例えば、p:not(.intro)というCSSセレクターは、「.introというクラスを持たないすべてのp（段落）要素」を選択します。これにより、特定のクラスを持つ段落だけを除外して、残りの段落にスタイルを適用するといった柔軟な指定が可能になります。ウェブページのデザインにおいて、特定の要素にはスタイルを適用したくない、あるいは特定の条件を満たさない要素に対してのみスタイルを適用したい場合に非常に有効な手段となります。

使用例としては、特定のIDを持つ要素を除くすべてのリンクに下線を引いたり、ある特定のクラスを持つ要素を除くすべてのリスト項目に背景色を設定したりする場合などが挙げられます。このように、除外したい条件を明示することで、より効率的かつ簡潔にCSSを記述できるようになります。

なお、:not()関数は、その引数として渡されたセレクターの詳細度を継承します。また、:not()の中に別の:not()をネストして記述することはできません。システムエンジニアを目指す初心者の方にとって、特定の要素を除外するという論理をCSSで表現するための重要なツールとして、この:not()関数は役立つでしょう。

Copy
1:not(セレクター) {
2  /* スタイル */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません