2023年~2024年CSS新機能
of Selector
<ul>
<li></li>
<li class="textarea"></li>
<li></li>
<li></li>
<li class="textarea"></li>
<li></li>
</ul>
li:nth-child(2).textarea {
background-color: blue;
}
li:nth-child(2 of .textarea) {
background-color: yellow;
}
1番目のCSSでは、2番目のliが選択されます。2番目のCSSでは、5番目のliが選択されます。
textareaクラスを持つすべての項目の中で2番目の項目だからです。
また、カンマ,を使用して他のセレクターを含めることもできます。
:nth-child(2 of .link, .button) {}
適用できるブラウザ
:is()
より短く簡潔なコードを書き、コードの繰り返しを減らし、可読性を高めることができます。
h1 {
font-size: 24px;
}
section h1,
article h1 {
font-size: 16px;
}
24pxのh1タグがあります。sectionやarticle内のタイトルのフォントサイズを変更するには、上記のコードのように記述する必要があります。
この2つのケース以外にも他のケースが続出すると、コードは長くなり、見た目もあまり良くないくなります。
このような時に:is()を使用して問題を解決することができます。
<h1>これはタイトルです。</h1>
<section>
<h1>これはサブタイトルです</h1>
<div><h1>テキストテキスト</h1></div>
<article>
<h1>これはarticleです</h1>
<div>
<h1>これはdivです</h1>
</div>
</article>
</section>
h1 {
font-size: 46px;
}
:is(section, article) h1 {
font-size: 36px;
color: red;
}
:is(section, article) :is(div) h1 {
font-size: 24px;
color: blue;
}
適用できるブラウザ
@property
<span class="greentxt">propertyテストです</span>
:root {
--titleColor: green;
--fz20: 2rem;
}
.greentxt {
color: var(--titleColor);
font-size: var(--fz20);
}
上記のコードのようにCSS変数を使用することが可能です。これも良いのですが、変数にデフォルト値を設定し、変数を再定義するとともに、型まで指定できる方法もあります。
@property --titleColor {
syntax: "<color>";
initial-value: green;
inherits: false;
}
.greentxt:hover {
--titleColor: blue;
}
.greentxt:first-of-type:hover {
--titleColor: false;
}
プロパティの名前をtitleColorと指定し、ブラウザでこのプロパティが保持する値の型がcolorであることを知らせ、デフォルト値をgreenに設定します。
最後に、プロパティが継承可能かどうかを選択でき、trueにするとこのプロパティは親から値を継承し、falseにすると継承しません。使用する際は、CSS変数のように使用し、.greentxtがhoverされた時に--titleColorの値を別の値に設定するだけです。
first-of-typeで--titleColorの色ではなくFalseに設定していますが、@propertyを使用しているためエラーは発生しません。
他のproperty
url
@property --img {
syntax: "<url>";
initial-value: url("img.jpg");
inherits: false;
}
percentage
@property --width {
syntax: "<percentage>";
initial-value: 50%;
inherits: false;
}
transform-function
@property --transform {
syntax: "transform-function";
initial-value: translateX(30px);
inherits: false;
}
適用できるブラウザ
:has() Selector
このSelectorは、特定の親Selectorが特定の子Selectorを持つ場合に適用する、いわばCSSのif文バージョンと見なすことができます。過去はこれを実装するにはCSSだけでは文法的な制限があったため、SCSSやJavaScriptを通じてのみ可能でした。
使用法としては、例えばdiv.checkareaがinput要素を持っている場合に限り、自身の要素にスタイルを適用したい場合は、次のようにします。
<div class="checkarea">
<label><input type="radio" name="banana" />バナナ</label>
<label><input type="radio" name="apple" />リンゴ</label>
</div>
.checkarea input:checked {
accent-color: #c006f8;
}
.checkarea label:has(input:checked) {
border: 2px solid #c006f8;
}
適用できるブラウザ
※適用できるブラウザする方法
Discussion