: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 پشتیبانی می کنند.