要素の数が1つの時にcssを当てる書き方

jsを使わなくても、子要素の数が1つの時の判定ができるので、書き方のメモです。



:only-child
その要素内で、子要素が1つなら適用



:only-of-type
その要素内で、指定の子要素が1つなら適用

See the Pen 要素の数が1つの時にcssを当てる書き方 by takapen (@takapen) on CodePen.

:only-child


h1h1h1h1h1
pppppp



h1h1h1h1h1



pppppp




:only-of-type


h1h1h1h1h1
pppppp



h1h1h1h1h1



pppppp

/* :only-child
その要素内で、子要素が1つなら適用 */
.div1 h1:only-child {
  color: #c00;
}
.div1 p:only-child {
  color: #00c;
}


/* :only-of-type
その要素内で、指定の子要素が1つなら適用 */
.div2 h1:only-of-type {
  color: #c00;
}
.div2 p:only-of-type {
  color: #00c;
}