الفرق بين المراجعتين لصفحة: «CSS/:empty»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
سطر 11: | سطر 11: | ||
== أمثلة == | == أمثلة == | ||
لدينا في المثال الآتي ثلاثة عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، أولها يحتوي تعليقًا فقط، والثاني يحتوي على عقدة نصية، والثالث يحتوي على تعليق لكن هنالك فراغات قبله:<syntaxhighlight lang="html"> | لدينا في المثال الآتي ثلاثة عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، أولها يحتوي تعليقًا فقط، والثاني يحتوي على عقدة نصية، والثالث يحتوي على تعليق لكن هنالك فراغات قبله:<syntaxhighlight lang="html"> | ||
<div class="box"><!-- | <div class="box"><!-- سأكون ليموني اللون --></div> | ||
<div class="box"> | <div class="box">سأكون وردي اللون.</div> | ||
<div class="box"> | <div class="box"> | ||
<!-- | <!-- سوف أكون ورديًا بسبب المساحة البيضاء حول هذا التعليق --> | ||
</div> | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> |
مراجعة 14:56، 3 أكتوبر 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 |
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.