CSS/:target

الصنف الزائف ‎: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

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

• معيار HTML Living Standard.
• مسودة Selectors Level 4.
• مواصفة Selectors Level 3.