くまだどうも、くまだです。
中身が空のときにスタイルを当てることができる疑似クラス「:empty」の使い方。
:emptyは中身が空のときにスタイルを当てる疑似セレクタ
:emptyの使い方は簡単。
<div class="elementWrap">
<div class="element">要素の中身あり</div>
<!-- スペースあり -->
<div class="element"> </div>
<!-- スペースなし -->
<div class="element"></div>
</div>.element {
width: 100%;
height: 20px;
border: 1px solid orange;
}
.element + .element {
margin-top: 16px;
}
.elementWrap {
/* 調整用 */
max-width: 200px;
margin-left: 40px;
margin-top: 40px;
}
.element:empty {
border: transparent;
}
1つ目の要素は、要素の中身があるのでそのままスタイル適用。2つ目は半角スペースを含んだ要素で、こちらはemptyは適用されず。3つ目の要素は、emptyに適用したスタイルが効いて、線がなくなりました。
.element:empty {
border: transparent;
}
上のコードの場合だと、線はなくなっても、横幅と高さを指定しているので。要素自身が消えたわけではないです。
一応、要素が空のとき兄弟要素が～みたいなスタイルも適用されます。
<div class="elementWrap">
<div class="element">要素の中身あり</div>
<!-- スペースあり -->
<div class="element"> </div>
<!-- スペースなし -->
<div class="element"></div>
<div class="element">要素の中身</div>
</div>
.element {
width: 100%;
height: 20px;
border: 1px solid orange;
}
.element + .element {
margin-top: 16px;
}
.elementWrap {
/* 調整用 */
max-width: 200px;
margin-left: 40px;
margin-top: 40px;
}
.element:empty {
border: transparent;
}
.element:empty + .element {
background-color: orange;
}
使いどころとしてはどこだろうか…。
例えば入力欄があって、空欄の場合は入力欄の背景色を目立つ色にして、記入漏れをなくす、とか…?
ここまで読んでくださりありがとうございました。