شبه کلاس target: در CSS

:target Pseudo-class

شبه کلاس target: در CSS عنصر منحصر به فردی را با ID منطبق بر قسمتی از آدرس URL، هدف می گیرد.

برای مثال در آدرس زیر قسمتی وجود دارد که ابتدای آن # میباشد (section2) که به عنصری با همین ID اشاره می کند.

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

زمانی که آدرس بالا انتخاب می شود، عنصر زیر باید توسط سودو کلاس target: انتخاب شود.

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

ساخت یک جدول محتوا

شبه کلاس target: می تواند برای هایلایت کردن قسمتی از صفحه بکار رود که به جدول محتوا لینک شده است.

html

<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> را با
  کلیک بر روی لینک بالا انتخاب کنید!</p>
<p id="p2">این یک <i>پاراگراف دیگر</i>, که توسط
  لینک های بالا قابل انتخاب است!</p>

css

p:target {
  background-color: gold;
}

/* افزودن سودو المنت به هنصر هدف */
p:target::before {
  font: 70% sans-serif;
  content: "◄";
  color: limegreen;
  margin-left: .25em;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.