CSSの:has擬似クラスを紹介！今まではJavaScriptでしかできなかった指定をCSSのみで実装
動画内で説明していた、過去のセレクターの動画は以下です。
・基礎編
https://factory-programming-mv.com/video/AYp_SDYuEB8/
・応用編
https://factory-programming-mv.com/video/bBZajHGFX5g/
この動画では、CSSの新しい機能である「has擬似クラス」（ハズ擬似クラス）を使って、JavaScriptを使わずにスタイル指定ができる方法を解説しています。これまでJSでしか実現できなかった、複雑なメニューの展開や要素の状態に応じたデザイン変更を、HTMLとCSSだけで実現できるようになった点が大きなポイントです。
まず、動画の前半では、一般的なメニュー（ナビゲーションメニュー）の作り方を例に説明しています。複数のリスト項目（liタグ）やリンク（Aタグ）を使ってメニューを構築し、その中に子要素としてのサブメニュー（コメニュー）を入れています。ここで注目すべきは、子メニューが存在するリスト項目に対して、CSSの疑似要素（:after）を用い、下向きの矢印（アイコン）を表示するテクニックです。これにより、ユーザーに「この項目はさらに子メニューを持っています」という視覚的なヒントを与えることができます。
また、has擬似クラスを活用することで、たとえば「直下にUL（アンオーダードリスト）があるli要素」にだけ特定のスタイル（例えば矢印の挿入や色の変更）を適用することが可能になります。従来はJavaScriptでDOM操作を行わなければならなかった部分も、CSSだけで条件に応じた装飾ができるため、コードがシンプルになり、保守性やパフォーマンスの向上が期待できます。
さらに、動画後半では、チェックボックスとラベル（labelタグ）を使った例も紹介されています。チェックボックス（input[type="checkbox"]）にチェックが入ったとき、その直前にあるラベルのスタイルを変える方法を、has擬似クラスと隣接セレクター（+）を組み合わせて説明しています。たとえば、チェックが入ったときにラベルの文字色を赤く変えたり、フォントウェイトを太字（font-weight: bold）に変更することで、ユーザーに操作結果をわかりやすく示すことができます。
また、動画内では「テスト」というクラスを例に、特定のクラスが付いた要素だけにスタイルを適用する方法も触れています。これにより、クラス名やタグ名を指定して、画像（IMGタグ）やリンク（Aタグ）など、任意の要素に細かいデザイン調整が可能になります。なお、CSSでのデザイン指定は、border（ボーダー・枠線・下線、枠の色や指定方法）のような基本的なスタイル指定と組み合わせることで、さらに多彩なレイアウトが実現できるため、応用範囲が広がります。
補足として、CSSの擬似クラスや擬似要素は、Webフロントエンド技術の中でもとても重要な技術です。初心者でも、今回の具体例（Visual Studio Codeなどのエディターを用いたHTMLとCSSのみの実装例）を通して、コードの書き方や動的なスタイル変更の考え方を学びやすくなっています。これにより、Webデザインやユーザーインターフェイス（UI）、ユーザーエクスペリエンス（UX）の向上にも役立つ知識が身につくでしょう。
・基礎編
https://factory-programming-mv.com/video/AYp_SDYuEB8/
・応用編
https://factory-programming-mv.com/video/bBZajHGFX5g/
この動画では、CSSの新しい機能である「has擬似クラス」（ハズ擬似クラス）を使って、JavaScriptを使わずにスタイル指定ができる方法を解説しています。これまでJSでしか実現できなかった、複雑なメニューの展開や要素の状態に応じたデザイン変更を、HTMLとCSSだけで実現できるようになった点が大きなポイントです。
まず、動画の前半では、一般的なメニュー（ナビゲーションメニュー）の作り方を例に説明しています。複数のリスト項目（liタグ）やリンク（Aタグ）を使ってメニューを構築し、その中に子要素としてのサブメニュー（コメニュー）を入れています。ここで注目すべきは、子メニューが存在するリスト項目に対して、CSSの疑似要素（:after）を用い、下向きの矢印（アイコン）を表示するテクニックです。これにより、ユーザーに「この項目はさらに子メニューを持っています」という視覚的なヒントを与えることができます。
また、has擬似クラスを活用することで、たとえば「直下にUL（アンオーダードリスト）があるli要素」にだけ特定のスタイル（例えば矢印の挿入や色の変更）を適用することが可能になります。従来はJavaScriptでDOM操作を行わなければならなかった部分も、CSSだけで条件に応じた装飾ができるため、コードがシンプルになり、保守性やパフォーマンスの向上が期待できます。
さらに、動画後半では、チェックボックスとラベル（labelタグ）を使った例も紹介されています。チェックボックス（input[type="checkbox"]）にチェックが入ったとき、その直前にあるラベルのスタイルを変える方法を、has擬似クラスと隣接セレクター（+）を組み合わせて説明しています。たとえば、チェックが入ったときにラベルの文字色を赤く変えたり、フォントウェイトを太字（font-weight: bold）に変更することで、ユーザーに操作結果をわかりやすく示すことができます。
また、動画内では「テスト」というクラスを例に、特定のクラスが付いた要素だけにスタイルを適用する方法も触れています。これにより、クラス名やタグ名を指定して、画像（IMGタグ）やリンク（Aタグ）など、任意の要素に細かいデザイン調整が可能になります。なお、CSSでのデザイン指定は、border（ボーダー・枠線・下線、枠の色や指定方法）のような基本的なスタイル指定と組み合わせることで、さらに多彩なレイアウトが実現できるため、応用範囲が広がります。
補足として、CSSの擬似クラスや擬似要素は、Webフロントエンド技術の中でもとても重要な技術です。初心者でも、今回の具体例（Visual Studio Codeなどのエディターを用いたHTMLとCSSのみの実装例）を通して、コードの書き方や動的なスタイル変更の考え方を学びやすくなっています。これにより、Webデザインやユーザーインターフェイス（UI）、ユーザーエクスペリエンス（UX）の向上にも役立つ知識が身につくでしょう。