الفرق بين المراجعتين لصفحة: «CSS/:first»

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

الصنف الزائف ‎:first في CSS (أي pseudo-class) يُستعمَل مع القاعدة ‎@page، ويُمثِّل أوّل صفحة من المستند عند طباعته.

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

ملاحظة: لا يمكن تغيير قيم جميع خاصيات CSS عند استخدام هذا الصنف الزائف، وإنما يمكن تغيير قيم الهوامش margin واليتامى orphans والأرامل widows وطريقة الانتقال إلى صفحة جديدة؛ وسيتم تجاهل جميع الخاصيات الأخرى. الشكل العام لهذا المحدد:

:first

أمثلة

لاحظ كيف ستتغير الهوامش في الصفحة الأولى عند طباعتها:

<p>الصفحة الأولى</p>
<p>الصفحة الثانية</p>
<button>طباعة!</button>

شيفرة CSS:

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

شيفرة JavaScript:

document.querySelector("button").onclick = function () {
  window.print();
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	مدعومة	غير مدعومة	8.0	9.2	؟

انظر أيضًا

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

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

مواصفة CSS Paged Media Module Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 15: / سطر 15: @@
 لاحظ كيف ستتغير الهوامش في الصفحة الأولى عند طباعتها:
 <syntaxhighlight lang="html">
-<p>First Page.</p>
+<p>الصفحة الأولى</p>
-<p>Second Page.</p>
+<p>الصفحة الثانية</p>
-<button>Print!</button>
+<button>طباعة!</button>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
@@ سطر 50: / سطر 50: @@
 |؟
 |}
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:empty|empty:]]</code> الذي يُمثِّل أي عنصر ليس له أبناء.
+* صفحة الصنف الزائف <code>[[CSS/:first-child|first-child:]]</code> الذي يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
+* صفحة الصنف الزائف <code>[[CSS/:first-of-type|first-of-type:]]</code> الذي يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.
+== مصادر ومواصفات ==
 *مواصفة [https://drafts.csswg.org/css-page-3/#left-right-first CSS Paged Media Module Level 3].
 *مواصفة ‎[http://www.w3.org/TR/CSS2/page.html#page-selectors CSS Level 2 (Revision 1)‎].