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

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
ط
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE: الصنف <code>‎:target</code>‎}}</noinclude>
 
<noinclude>{{DISPLAYTITLE: الصنف <code>‎:target</code>‎}}</noinclude>
الصنف الزائف <code>‎:target</code>‎ في CSS (أي pseudo-class) يُمثِّل عنصرًا فريدًا يُطابِق مُعرِّفه <code>id</code> قسمًا من رابط URL. <syntaxhighlight lang="css">
+
الصنف الزائف <code>‎:target</code>‎ في [[CSS]] (أي pseudo-class) يُمثِّل عنصرًا فريدًا يُطابِق مُعرِّفه <code>id</code> قسمًا من رابط URL. <syntaxhighlight lang="css">
 
:target {
 
:target {
 
   border: 2px solid black;
 
   border: 2px solid black;
سطر 14: سطر 14:
 
== أمثلة ==
 
== أمثلة ==
 
مثال عن استخدام الصنف الزائف <code>‎:target</code>‎ للإشارة إلى جزء من الصفحة جرى الانتقال إليه من جدول المحتويات:<syntaxhighlight lang="html">
 
مثال عن استخدام الصنف الزائف <code>‎:target</code>‎ للإشارة إلى جزء من الصفحة جرى الانتقال إليه من جدول المحتويات:<syntaxhighlight lang="html">
<h3>Table of Contents</h3>
+
<h3>جدول المحتويات</h3>
 
<ol>
 
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
+
  <li><a href="#p1">انتقل إلى النص الأول</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
+
  <li><a href="#p2">انتقل إلى النص الثاني</a></li>
  <li><a href="#nowhere">This link goes nowhere,
+
  <li><a href="#nowhere">هذا الرابط لا يذهب إلى أي مكان ،
  because the target doesn't exist.</a></li>
+
    لأن الهدف غير موجود</a></li>
 
</ol>
 
</ol>
  
<h3>My Fun Article</h3>
+
<h3>مقالتي المرحة</h3>
<p id="p1">You can target <i>this paragraph</i> using a
+
<p id="p1">يمكنك استهداف <i> هذه الفقرة </i> باستخدام
  URL fragment. Click on the link above to try out!</p>
+
   جزء URL. انقر على الرابط أعلاه للتجربة!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
+
<p id="p2">هذه هي <i> فقرة أخرى </i> ، يمكن الوصول إليها أيضًا
  from the links above. Isn't that delightful?</p>
+
   من الروابط أعلاه. أليس هذا لذيذ؟</p>
  
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">

المراجعة الحالية بتاريخ 11:16، 7 أكتوبر 2022

الصنف الزائف ‎:target‎ في CSS (أي pseudo-class) يُمثِّل عنصرًا فريدًا يُطابِق مُعرِّفه id قسمًا من رابط URL.

:target {
  border: 2px solid black;
}

فمثلًا الرابط الآتي له قسم (الذي يلي رمز #) يُشير إلى العنصر المسمى section2:

http://www.example.com/index.html#section2

وسيُحدَّد العنصر الآتي عبر الصنف الزائف ‎:target‎ عندما يكون رابط الصفحة مساويًا للرابط السابق:

<section id="section2">Example</section>

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

:target

أمثلة

مثال عن استخدام الصنف الزائف ‎:target‎ للإشارة إلى جزء من الصفحة جرى الانتقال إليه من جدول المحتويات:

<h3>جدول المحتويات</h3>
<ol>
 <li><a href="#p1">انتقل إلى النص الأول</a></li>
 <li><a href="#p2">انتقل إلى النص الثاني</a></li>
 <li><a href="#nowhere">هذا الرابط لا يذهب إلى أي مكان ،
    لأن الهدف غير موجود</a></li>
</ol>

<h3>مقالتي المرحة</h3>
<p id="p1">يمكنك استهداف <i> هذه الفقرة </i> باستخدام
   جزء URL. انقر على الرابط أعلاه للتجربة!</p>
<p id="p2">هذه هي <i> فقرة أخرى </i> ، يمكن الوصول إليها أيضًا
   من الروابط أعلاه. أليس هذا لذيذ؟</p>

شيفرة CSS:

p:target {
  background-color: gold;
}

p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

p:target i {
  color: red;
}

يمكننا أيضًا استخدام الصنف الزائف ‎:target‎ لإنشاء lightbox (طبقة شفافة تحجب ما تحتها) دون استخدام JavaScript، وذلك بالإشارة إلى عناصر مخفية في الصفحة، لكن عند طلبها عبر رابط URL فستُغيّر CSS قيمة الخاصية display لكي تظهر:

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.</figcaption>
  </figure>
</div>

شيفرة CSS:

/* Unopened lightbox */
.lightbox {
  display: none;
}

/* Opened lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox content */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/* Close button */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Lightbox overlay */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}

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

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

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