最近知ったCSS Tips

テキストカーソルへのスタイル付与

以下のように記述することで、テキストボックス内のカーソルに対してのみスタイルを付与することができます。

#id {
  caret-color: aqua;
}

カーソルにアニメーションを当てることも可能です。

#id:focus {
  animation: colorChange 2s infinite;
}

@keyframes colorChange {
  0%   { caret-color: red }
  50%  { caret-color: aqua }
  100% { caret-color: red }
}

要素幅の可視化

要素幅の可視化は、検証ツールなどを使用して特定の要素に対してカーソルを合わせることで確認することができます。

検証ツールではあくまで特定要素のみの可視化しかできないのですが、CSSに以下のコードを記述することでページ内の全要素幅を可視化することができます。

余白と要素幅の区別はつけれないので検証ツールのような精度ではありませんが、無駄な余白や意図していない要素幅になっていないかなどを全体的に確認する際に役立ちます。

* {
  box-sizing: border-box;
  outline: 1px solid limegreen !important;
}

ラインではなく、背景色での表示にしたい場合には下記のように記述します。

* {
  box-sizing: border-box;
  background: rgb(5 10 10 / 0.1) !important;
}

擬似クラス is (:is)

擬似クラスisは、引数に指定したセレクタのどれか一つに当てはまるものにスタイルを付与します。
この擬似クラスisを利用することで、今まで複数列挙していたセレクタを省略して記述することが可能になります。

html

<header>
  <span>HEADER</span>
  <p>header</p>
</header>
<main>
  <span>MAIN</span>
  <p>main</p>
</main>
<footer>
  <span>FOOTER</span>
  <p>footer</p>
</footer>

css

/* before */
header > span,
main > span,
footer > span {
  color: red;
}

/* after */
:is(header, main, footer) > span {
  color: red;
}

擬似クラス has (:has)

擬似クラスhasは、引数に指定したセレクターに該当する要素が１つ以上一致することを表します。

/* 子要素にimgタグを含む要素 */
.class:has(> img) {
  /* スタイル */
}

/* 兄弟要素にimgタグを含む要素 */
.class:has(+ img) {
  /* スタイル */
}

擬似クラスnotなどと併用することも可能です。

html

<ul>
  <li>
    <a>aaaaa</a>
  </li>
  <li>
    <a>aaaaa</a>
  </li>
  <li>
    <a>aaaaa</a>
  </li>
  <li>
    bbbbb
  </li>
</ul>

css

/* 子要素にaタグを含まない */
li:not(:has(> a)) {
  color: red
}