IEのサポートがなくなってからここ数年、CSSはかなりの速度で進化をとげています。
これまでJavascriptに依存していたものがCSSのみで実現可能になったり、CSSでは難しかったレイアウトが簡単にできるようになる、そういった疑似クラスやプロパティが続々と増えています。
Javascriptの長いコードから短いCSSのコードで済む、開発者ライクなものが近年のCSSのトレンドとして上がっています。
今回は、そんな進化した最新のトレンドCSSをいくつかご紹介します。
新しいcssを使うときはブラウザが対応しているかの確認が必要です！
・対応ブラウザが確認できるサイト
https://caniuse.com/css-math-functions
【 :has 】要素のありなし判定
擬似クラスの「:has」はjQueryの「.has()」と同じ仕様です。特定の要素やclass、ID（子要素）がある親要素が指定できます。
例えばliにimgタグがある場合だけ横並びにしたいときは、以下のように指定できます。
