Π―ΠΊΡΠΎ Π²Π°Ρ ΠΌΠ°ΠΊΠ΅Ρ βΠ»Π°ΠΌΠ°ΡΡΡΡΡβ Ρ Π²ΠΈ Π½Π΅ ΡΠΎΠ·ΡΠΌΡΡΡΠ΅ ΡΠΎΠΌΡ, ΠΌΠΎΠΆΠ»ΠΈΠ²ΠΎ, Π²ΠΈΠ½Π½Ρ ΠΏΠΎΡΠΎΠΆΠ½Ρ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ. ΠΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠΉΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°Ρ :empty
, ΡΠΎΠ± ΡΡ
ΠΏΡΠΈΡ
ΠΎΠ²Π°ΡΠΈ Π°Π±ΠΎ Π·Π½Π°ΠΉΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ½Ρ ΠΌΡΡΡΡ Π² ΡΠΎΠ·ΠΌΡΡΡΡ.
π ΠΡΠΈΡ ΠΎΠ²ΡΡΠΌΠΎ ΠΏΠΎΡΠΎΠΆΠ½Ρ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ
p:empty {
display: none;
}
- Π¦Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΏΡΠΈΡ
ΠΎΠ²Π°Ρ
<p>
, ΡΠΊΡ Π½Π΅ ΠΌΠ°ΡΡΡ Π΄ΠΎΡΡΡΠ½ΡΡ Π΅Π»Π΅ΠΌΠ΅Π½ΡΡΠ² Π°Π±ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΈΡ Π²ΡΠ·Π»ΡΠ². - Π―ΠΊΡΠΎ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ ΠΌΡΡΡΠΈΡΡ Ρ ΠΎΡΠ° Π± ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΠ±ΡΠ», Π²ΡΠ½ Π½Π΅ Π±ΡΠ΄Π΅ ΠΏΡΠΈΡ ΠΎΠ²Π°Π½ΠΈΠΉ.
- Π¦Π΅ ΠΊΠΎΡΠΈΡΠ½ΠΎ Π΄Π»Ρ Π²ΠΈΠ΄Π°Π»Π΅Π½Π½Ρ Π·Π°ΠΉΠ²ΠΈΡ
ΠΏΠΎΡΠΎΠΆΠ½ΡΡ
<p>
, ΡΠΊΡ ΠΌΠΎΠΆΡΡΡ Π·βΡΠ²ΠΈΡΠΈΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠΌΠΈΠ»ΠΊΠΈ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ .
π ΠΠΈΠΊΠΎΡΠΈΡΡΠ°Π½Π½Ρ :empty
Π΄Π»Ρ Π΄Π΅Π±Π°Π³Ρ
ΠΠ½ΠΎΠ΄Ρ ΠΏΡΠΈ Π²Π΅ΡΡΡΡΡ Π²ΠΈΠ½ΠΈΠΊΠ°Ρ ΠΏΠΈΡΠ°Π½Π½Ρ: βΠ§ΠΎΠΌΡ ΡΠ΅ΠΉ Π±Π»ΠΎΠΊ Π·Π°ΠΉΠΌΠ°Ρ ΠΌΡΡΡΠ΅, Ρ ΠΎΡΠ° Π²ΡΠ½ ΠΏΡΡΡΠΈΠΉ?β ΠΠΈ ΠΌΠΎΠΆΠ΅ΠΌΠΎ ΡΠ²ΠΈΠ΄ΠΊΠΎ Π·Π½Π°ΠΉΡΠΈ ΡΠ°ΠΊΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΈ, Π΄ΠΎΠ΄Π°Π²ΡΠΈ ΠΊΠΎΠ½ΡΡΡ Π΄Π»Ρ Π²ΡΡΡ ΠΏΠΎΡΠΎΠΆΠ½ΡΡ Π΅Π»Π΅ΠΌΠ΅Π½ΡΡΠ²:
*:empty {
outline: 1px solid red;
}
π₯ ΠΠΎΠ»ΠΈ ΡΠ΅ ΠΊΠΎΡΠΈΡΠ½ΠΎ?
- ΠΡΠΈ ΡΠΎΠ±ΠΎΡΡ Π· CSS Grid:
:empty
Π΄ΠΎΠΏΠΎΠΌΠ°Π³Π°Ρ Π·Π½Π°ΠΉΡΠΈ ΠΏΠΎΡΠΎΠΆΠ½Ρ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ, ΡΠΊΡ ΠΌΠΎΠΆΡΡΡ Π·Π°ΠΉΠΌΠ°ΡΠΈ Π·Π°ΠΉΠ²Ρ ΠΊΠΎΠΌΡΡΠΊΠΈ. - Π flex-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°Ρ : ΠΏΡΡΡΡ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ ΠΌΠΎΠΆΡΡΡ Π²ΠΏΠ»ΠΈΠ²Π°ΡΠΈ Π½Π° ΡΠΎΠ·ΠΏΠΎΠ΄ΡΠ» ΠΏΡΠΎΡΡΠΎΡΡ.
- Π ΡΠΎΡΠΌΠ°ΡΠΎΠ²Π°Π½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ: ΠΏΡΠΈΡ ΠΎΠ²Π°Π½Ρ Π°Π±Π·Π°ΡΠΈ ΠΌΠΎΠΆΡΡΡ Π΄ΠΎΠ΄Π°Π²Π°ΡΠΈ Π·Π°ΠΉΠ²Ρ Π²ΡΠ΄ΡΡΡΠΏΠΈ.
π ΠΡΠΈΠΊΠ»Π°Π΄ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΈ Π· CSS Grid:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-container div {
background: lightblue;
padding: 20px;
text-align: center;
}
.grid-container div:empty {
outline: 2px dashed red;
}
<div class="grid-container">
<div>1</div>
<div></div> <!-- Π¦Π΅ ΠΏΠΎΡΠΎΠΆΠ½ΡΠΉ div, Π°Π»Π΅ Π²ΡΠ½ Π²ΡΠ΅ ΠΎΠ΄Π½ΠΎ Π·Π°ΠΉΠΌΠ°Ρ ΠΌΡΡΡΠ΅ -->
<div>3</div>
</div>
Π£ ΡΡΠΎΠΌΡ Π²ΠΈΠΏΠ°Π΄ΠΊΡ Π΄ΡΡΠ³ΠΈΠΉ div
Π±ΡΠ΄Π΅ Π²ΠΈΠ΄ΡΠ»Π΅Π½ΠΈΠΉ ΡΠ΅ΡΠ²ΠΎΠ½ΠΎΡ ΡΠ°ΠΌΠΊΠΎΡ, ΡΠΎ Π΄ΠΎΠΏΠΎΠΌΠΎΠΆΠ΅ Π²ΠΈΡΠ²ΠΈΡΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
β Π§ΠΎΠ³ΠΎ :empty
Π½Π΅ ΠΏΡΠΈΡ
ΠΎΠ²Π°Ρ?
1 CSS-ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²ΡΠ΅ ΡΠ΅ Π²Π²Π°ΠΆΠ°ΡΡΡΡΡ βΠΏΠΎΡΠΎΠΆΠ½ΡΠΌβ
Π―ΠΊΡΠΎ ΠΌΠΈ Π΄ΠΎΠ΄Π°ΡΠΌΠΎ ΡΠ΅ΠΊΡΡ ΡΠ΅ΡΠ΅Π· content: ""
, Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΠ΅ ΠΎΠ΄Π½ΠΎ Π²Π²Π°ΠΆΠ°Ρ ΡΠ°ΠΊΠΈΠΉ Π΅Π»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠΎΠΆΠ½ΡΠΌ:
span:empty::before {
content: "π";
color: red;
}
Π¦Π΅ΠΉ span
Π²ΡΠ΅ ΡΠ΅ :empty
, Ρ
ΠΎΡΠ° Π² Π½ΡΠΎΠΌΡ Ρ Π²ΠΈΠ΄ΠΈΠΌΠΈΠΉ ΡΠ΅ΠΊΡΡ.
2
(Π½Π΅ΡΠΎΠ·ΡΠΈΠ²Π½ΠΈΠΉ ΠΏΡΠΎΠ±ΡΠ») Π²Π²Π°ΠΆΠ°ΡΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ
ΠΡΠΎΠ±ΡΠ»ΠΈ (β β) Π°Π±ΠΎ
Ρ <p>
ΡΠΈ div
ΡΠΎΠ±Π»ΡΡΡ ΠΉΠΎΠ³ΠΎ Π½Π΅ΠΏΠΎΡΠΎΠΆΠ½ΡΠΌ:
<p> </p> <!-- Π¦Π΅ΠΉ Π°Π±Π·Π°Ρ Π½Π΅ Π±ΡΠ΄Π΅ Π²Π²Π°ΠΆΠ°ΡΠΈΡΡ ΠΏΠΎΡΠΎΠΆΠ½ΡΠΌ -->
π Π ΡΡΠ΅Π½Π½Ρ β Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠ²Π°ΡΠΈ :not(:empty)
Π΄Π»Ρ ΠΏΠΎΡΡΠΊΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ.
π― ΠΠΈΠΊΠΎΡΠΈΡΡΠ°Π½Π½Ρ :not(:empty)
ΠΠΎΠΆΠ΅ΠΌΠΎ Π·ΡΠΎΠ±ΠΈΡΠΈ ΠΏΡΠΎΡΠΈΠ»Π΅ΠΆΠ½Π΅ β Π²ΠΈΠ±ΡΠ°ΡΠΈ ΡΡΠ»ΡΠΊΠΈ Π·Π°ΠΏΠΎΠ²Π½Π΅Π½Ρ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ:
p:not(:empty) {
background: lightgreen;
padding: 5px;
}
π₯ ΠΠ΅ ΠΊΠΎΡΠΈΡΠ½ΠΎ?
- Π‘ΡΠΈΠ»ΡΠ·ΡΠ²Π°ΡΠΈ ΡΡΠ»ΡΠΊΠΈ ΡΡ
<p>
, Π΄Π΅ Ρ ΡΠ΅ΠΊΡΡ. - ΠΠΈΠ·Π½Π°ΡΠΈΡΠΈ Π±Π»ΠΎΠΊΠΈ, ΡΠΊΡ ΠΌΡΡΡΡΡΡ ΠΊΠΎΡΠΈΡΠ½ΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
- ΠΠΎΠΊΡΠ°ΡΠΈΡΠΈ UX, ΠΏΠΎΠΊΠ°Π·ΡΡΡΠΈ ΡΡΠΈΠ»ΡΠ·Π°ΡΡΡ ΡΡΠ»ΡΠΊΠΈ Π½Π° Π°ΠΊΡΠΈΠ²Π½ΠΈΡ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠ°Ρ .
π ΠΠΈΡΠ½ΠΎΠ²ΠΎΠΊ
:empty
Π΄ΠΎΠΏΠΎΠΌΠ°Π³Π°Ρ ΠΏΡΠΈΡ ΠΎΠ²ΡΠ²Π°ΡΠΈ Π·Π°ΠΉΠ²Ρ ΠΏΠΎΡΠΎΠΆΠ½Ρ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ ΡΠ° ΠΎΡΠΈΡΠ°ΡΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.- ΠΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠΉΡΠ΅ ΠΉΠΎΠ³ΠΎ Π΄Π»Ρ Π΄Π΅Π±Π°Π³Ρ, ΡΠΎΠ± Π·Π½Π°ΠΉΡΠΈ Π½Π΅ΠΏΠΎΠΌΡΡΠ½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΈ Π· ΡΠΎΠ·ΠΌΡΡΠΊΠΎΡ.
- ΠΠ½Π°ΠΉΡΠ΅ ΠΎΠ±ΠΌΠ΅ΠΆΠ΅Π½Π½Ρ:
content: ""
Π²ΡΠ΅ ΡΠ΅ Π²Π²Π°ΠΆΠ°ΡΡΡΡΡ ΠΏΠΎΡΠΎΠΆΠ½ΡΠΌ, Π°
β Π½Ρ. - ΠΠΎΠΌΠ±ΡΠ½ΡΠΉΡΠ΅
:empty
Ρ:not(:empty)
, ΡΠΎΠ± ΠΊΠ΅ΡΡΠ²Π°ΡΠΈ Π²ΡΠ·ΡΠ°Π»ΡΠ½ΠΈΠΌ Π²ΡΠ΄ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½ΡΠΌ Π΅Π»Π΅ΠΌΠ΅Π½ΡΡΠ².