الفرق بين المراجعتين ل"CSS/:empty"

المراجعة الحالية بتاريخ 21:06، 19 أكتوبر 2018

الصنف الزائف ‎:empty في CSS (أي pseudo-class) يُمثِّل أي عنصر ليس له أبناء، والأبناء يمكن أن تكون عقد عناصر (element nodes) أو عقدًا نصيةً (text nodes) بما في ذلك الفراغات. لن تؤثر التعليقات على اعتبار العنصر فارغًا أم لا.

div:empty {
  background: lime;
}

الشكل العام لهذا المحدد:

:empty

أمثلة

لدينا في المثال الآتي ثلاثة عناصر <div>، أولها يحتوي تعليقًا فقط، والثاني يحتوي على عقدة نصية، والثالث يحتوي على تعليق لكن هنالك فراغات قبله:

<div class="box"><!-- سأكون  ليموني اللون --></div>
<div class="box">سأكون وردي اللون.</div>
<div class="box">
    <!-- سوف أكون ورديًا بسبب المساحة البيضاء حول هذا التعليق -->
</div>

شيفرة CSS:

.box {
  background: pink;
  height: 80px;
  width: 80px;
  margin: 1em;
}

.box:empty {
  background: lime;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	9.0	9.5	3.1

انظر أيضًا

صفحة الصنف الزائف first: الذي يُمثِّل أوّل صفحة من المستند عند طباعته.
صفحة الصنف الزائف first-child: الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
صفحة الصنف الزائف first-of-type: الذي يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.

مصادر ومواصفات

مسودة Selectors Level 4.
مواصفة Selectors Level 3.

@@ سطر 11: / سطر 11: @@
 == أمثلة ==
 لدينا في المثال الآتي ثلاثة عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، أولها يحتوي تعليقًا فقط، والثاني يحتوي على عقدة نصية، والثالث يحتوي على تعليق لكن هنالك فراغات قبله:<syntaxhighlight lang="html">
-<div class="box"><!-- I will be lime. --></div>
+<div class="box"><!-- سأكون  ليموني اللون --></div>
-<div class="box">I will be pink.</div>
+<div class="box">سأكون وردي اللون.</div>
 <div class="box">
-     <!-- I will be pink because of the whitespace around this comment. -->
+     <!-- سوف أكون ورديًا بسبب المساحة البيضاء حول هذا التعليق -->
 </div>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 44: / سطر 44: @@
 |3.1
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:first|first:]]</code> الذي يُمثِّل أوّل صفحة من المستند عند طباعته.
+* صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
+* صفحة الصنف الزائف <code>[[CSS/:first-of-type|first-of-type:]]</code> الذي يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.
+== مصادر ومواصفات ==
 *مسودة [https://drafts.csswg.org/selectors-4/#empty-pseudo Selectors Level 4].
 *مواصفة [https://drafts.csswg.org/selectors-3/#empty-pseudo Selectors Level 3].