tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。:has()]今回はタイトルの通り、cssだけで「ある要素を含む場合」を特定して、その要素を含む親要素にスタイル指定をする方法になります。いう擬似クラスを使用します。実務での使用がかなり現実的なものとなってきました。当記事の後半では、FireFox等、未対応ブラウザの場合の対処法についても記載していますので、あわせてご覧ください。使ったスタイル指定の方法について、次のセクションより書いていきたいと思います。次の様な、1200pxの親要素内に、6枚のカードが並ぶカード型レイアウトがあったとします。上記のレイアウトのhtml構造から書いていきます。</div></div>続いて、上記htmlに適用するcssを記載します。.5rem;}↑上のhtmlとcssで、先ほどのキャプチャの様なカード型レイアウトの作成ができます。記載されたおすすめ表示をつけてみることにします。先ほどのcssに、次の記述を追加します。1rem;}↑出ました。擬似クラスを使うと、上記のキャプチャの様に「特定の条件を持つ子要素をふくんだ親要素だけ」をcssのみで特定して、styleを変える事が可能になるというわけです。p[data-tag=”osushi”])として、data属性による要素の絞り込みを行っています。特定のidを持つ要素や特定のclassを持つ要素など、cssで対象を一意に絞り込める要素であれば自由に指定が可能です。登場以前は、この様な要素の絞り込みは例えばJavaScriptを駆使する等のアプローチをするしか方法がなかったのですが、それがcssのみで実現できるということで、これはかなり使い道がありそうな手法かと思います。文字通り要素名:has(条件)↑この記法で指定した条件に一致する親要素を選択する事ができます。p[data-tag=”osushi”])↑この条件に当てはまる要素だけに作用してstyleを当てる事ができている、というわけです。指定すればいいんじゃないの?」と思われるかもしれませんが、「要素の並び順が固定」の「静的サイト」の場合は確かにそれでも大丈夫かもしれません。本当に真価を発揮するのは、主に動的サイトにおいてなのかなと思います。同じクラス名を持った複数の親要素が並ぶ様なページ(例えば3カラムで何らかのリストが並んでいる様なページ)で、なおかつユーザー操作によってその要素内の子要素の並び順、あるいは表示/非表示が変わる場合など。非常に強みを発揮する部分かと思います。対応ブラウザはどうなのか。便利ではあるものの、実務での投入は二の足を踏む存在だった実情があります。実務での使用がかなり現実的なものとなっています。それでも、「FireFoxがダメなら、うちの案件では使えないな...」と思う方も多いかもしれませんが、そこはJavaScriptを使って、次の様なアプローチをする事で補完する事が可能です。対応していないブラウザに対する補完をする事ができます。擬似クラスが使えるかどうかを判定しています。(WebAPI、と聞くと難しく聞こえるかもしれませんが、単純にJavaScriptから定型の構文で呼んであげるだけで使用できます。その判定結果が格納されることになります。それを利用しているのが3行目〜8行目までの部分。いうclassを付与してあげるということをしています。つけて、親要素を対象にclassを付与している、という形になります。いうのは、文字通り親要素を取得する記述になります。擬似クラスを使用した場合と同じ結果となる様に、あらかじめcss側には、次の記述を加えておきます。擬似クラスを使った場合と同じ結果を与える事ができる、というわけです。擬似クラスを使って、特定の要素を含む親要素に対して変化を与える方法と、それに対応していないブラウザを対象に、その補完を行う方法について書いてきました。@supports記法による方法が考えられます。具体的には、次のとおり。(条件)とする事で、そのプロパティが対応していた場合の記述と、そのプロパティが対応していない場合の記述を分けて管理する事ができます。知っておく事で、より柔軟なアプローチが取れることと思います。MDN内の解説などこの記事で登場した、用語などに関するMDN内の詳しい解説は次のとおりとなります。MDN↑いずれも、深い知見が得られますので一読することをおすすめします。いう擬似クラスを使ってcssだけで「ある要素を含む場合」を特定して、その要素を含む親要素にスタイル指定をする方法について記事を書きました。要素の特定方法の一つとして、威力を発揮してくれる素晴らしい擬似クラスだと感じています。今後の状況に期待したい、というところです。使い所をみきわめて、ぜひ柔軟に取り入れていきたいものですね。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。「SKILLUP.TEDATE」の出題数が、500問になりました!...ので、お楽しみください!私の修行時代のお話。Timeline]新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。印象的な文字表現が簡単にできる。