آموزش انتخاب فرزندان یونیک در CSS

اگر قصد دارید تمام تصاویری که در یک عنصر لینک(hyperlink)، قرار دارند را انتخاب کنید، می توانید از شبه کلاس only-child: استفاده کنید. این شبه کلاس، عناصر را وقتی که تنها فرزندِ یک عنصرِ دیگر هستند، انتخاب می کند. بنابراین فرض کنید می خواهیم یک کادر(border) را به هر تصویری که، تنها فرزندِ یک عنصرِ دیگر است اضافه کنیم. برای این کار می توانیم به صورت زیر عمل کنیم:

img:only-child {border: 1px solid black;}

دستور بالا، هر تصویری که آن معیارها را برآورده می کند مورد تطابق قرار می دهد. بنابراین اگر یک پاراگراف داشته باشیم که در داخل آن یک تصویر(image) قرار داشته باشد، و هیچ (عنصر) فرزند دیگری نداشته باشد، این تصویر صرف نظر از تمام متن هایی(text) که آن را احاطه کرده اند، مورد انتخاب یا گزینش قرار می گیرد.

اگر آنچه واقعاً به دنبال آن هستید، تصاویر تک-فرزندی هستند،که در درون لینک ها(hyperlinks) قرار دارند، آنگاه می توانیم سلکتور مورد نظر را به صورت زیر اصلاح کنیم؛ به تصویر 2.24 توجه کنید:          

a[href] img:only-child {border: 2px solid black;}
<a href="http://w3.org/"><img src="/w3.png" alt="W3C"></a>
<a href="http://w3.org/"><img src="/w3.png" alt=""> The W3C</a>
<a href="http://w3.org/"><img src="/w3.png" alt=""> <em>The W3C</em></a>

(تصویر 2.24 : انتخاب تصاویری که در درون لینک ها تک فرزند هستند)

 دو نکته در مورد شبه کلاس only-child: وجود دارد که باید به یاد داشته باشیم. اول اینکه، همواره این شبه کلاس را به عنصری که می خواهید تک-فرزند(only child) باشد اعمال کنید؛ و نباید همان طور که قبلاً گفته شد، آن را به عنصر والد(parent element) اعمال کنید. دوماً، وقتی که از شبه کلاس only-child: در یک سلکتور نواده(descendant) استفاده می کنید، شما عناصر مذکور را به رابطه والد-فرزندی محدود نمی کنید. اگر به مثال انتخاب تصاویر و لینک ها برگردیم، دستور a[href] img:only-child با هر تصویری(img) که تک-فرزند است(only child) و از یک عنصر a حاصل شده است، تطابق می یابد .برای تطابق، تصویرِ(img) عنصرِ مورد نظر باید تنها فرزندِ(only child) والد مستقیم خود باشد و از نسل یا فرزندان آن لینک(عنصر a) باشد. بنابراین در اینجا، هر سه تصویر(img) باید مورد تطابق قرار گیرند، این موضوع در تصویر 2.25 نشان داده شده است.

a[href] img:only-child {border: 5px solid black;}
<a href="http://w3.org/"><img src="/w3.png" alt="W3C"></a>
<a href="http://w3.org/"><span><img src="/w3.png" alt="W3C"></span></a>
<a href="http://w3.org/">A link to <span>the <img src="/w3.png" alt="">web</span> site</a>

(تصویر 2.25 : انتخاب تصاویری که درون لینک ها تک-فرزند هستند)

 در هر صورت، تصویر(img) مورد نظر، تنها فرزندِ(only child) والد خود است و در یک عنصر a قرار دارد. به این ترتیب، هر سه تصویر، توسط قاعده ی نشان داده شده مورد تطابق قرار می گیرند. اگر می خواهید این قاعده را محدود کنید، به طوری که تصاویری را انتخاب کنید که فرزند یک عنصر a هستند، می توانید از علامت ترکیب کننده ی فرزند(<)  به صورت زیر استفاده کنید:

a[href] > img:only-child

با این تغییر، تنها اولین تصویر از سه تصویر، مورد تطابق قرار می گیرد؛ این موضوع در تصویر 2.25 نشان داده شده است.

همه اینها عالی است؛ اما چه می شود اگر بخواهیم تصاویری که تنها تصویرِ درونِ یک لینک(hyperlink یا عنصر a) هستند را انتخاب کنیم که، عناصر دیگری نیز در آن وجود دارد؟ به کد زیر توجه کنید:

<a href="http://w3.org/"><b>•</b><img src="/w3.png" alt="W3C"></a>

در این کد، یک عنصر a داریم که دو فرزند دارد، که عبارتند از b و img؛ این عنصرِ img دیگر تنها فرزند والد خود (یعنی a) نیست و نمی توانیم با استفاده از دستور only-child: آن را مورد تطابق قرار دهیم. اما، این عنصر، می تواند با استفاده از دستور only-of-type: مورد تطابق قرار گیرد. این موضوع در تصویر 2.26 نشان داده شده است:

a[href] img:only-of-type {border: 5px solid black;}
<a href="http://w3.org/"><b>•</b><img src="/w3.png" alt="W3C"></a>
<a href="http://w3.org/"><span><b>•</b><img src="/w3.png" alt="W3C"></span></a>

 (تصویر 2.26 : انتخاب تصاویری(img) که تنها خواهر و برادر از نوع خود هستند)

تفاوت این است که دستور only-of-type ،هر عنصری که در نوعِ (عنصرِ) خود یکتا باشد را  تطابق می دهد. در حالیکه دستور only-child تنها اگر یک عنصر، هیچ خواهر و برادری نداشته باشد مورد تطابق قرار می گیرد. این موضوع در مواردی مانند انتخاب تصاویر، در داخل پاراگراف ها، بدون نگرانی در مورد حضور لینک ها(hyperlinks) یا دیگر عناصر درون خطی(inline) مفید است.

p > img:only-of-type {float: right; margin: 20px;}

تا زمانی که چندین تصویر(img) که فرزند همین پاراگراف باشند وجود ندارند، تصویر مذکور شناور(floated)خواهد شد.

ما همچنین می توانیم از این شبه کلاس، برای اعمال استایل های اضافی، به یک عنصر h2 ،وقتی که این عنصر، تنها عنصر در یک بخش(section) از یک سند است، استفاده کنیم؛ مانند زیر:

section > h2 {margin: 1em 0 0.33em; font-size: 1.8rem; border-bottom: 1px solid gray;}
section > h2:only-of-type {font-size: 2.4rem;}

 با توجه به این قوانین، هر section که تنها، یک فرزندِ h2 دارد نسبت به حالت معمول، بزرگ تر نشان داده می شود. اگر دو یا چند عنصر h2 در یک section وجود داشته باشند، هیچ یک از آنها بزرگتر از دیگری نخواهد بود. حضور دیگرْ فرزندان، خواه دیگرْ عناصرِ عنوان ها(heading) یا پاراگراف ها، جدول ها، لیست ها و غیره باشند، دخالتی در تطابق ها نخواهد داشت. یک نکته ی دیگر نیز وجود دارد که این موضوع را روشن می کند، این نکته این است که شبه عنصر only-of-type: به عناصر اشاره می کند نه چیز دیگر. کدهای زیر را در نظر بگیرید:

p.unique:only-of-type {color: red;}
<div>
<p class="unique">This paragraph has a 'unique' class.</p>
<p>This paragraph doesn't have a class at all.</p>
</div>

در این کدها، هیچ یک از پاراگراف ها انتخاب نخواهد شد. علت آن چیست؟ زیرا دو پاراگراف وجود دارند که فرزندان عنصر div هستند؛ بنابراین هیچ یک از آنها نمی تواند، تنها در نوع خود، تنها عنصر، باشد. کلاس به کار رفته(unique) در کدها، نامرتبط است. ما فریب خوردیم که فکر کردیم کلمه ی type یک توضیح کلی است، زیرا عبارت only-of-type را تجزیه می کنیم. کلمه type در دستور only-of-type: تنها به نوع عنصر، اشاره می کند، بنابراین دستور p.unique:only-of-type یعنی: هر عنصر p که خصوصیت class آن حاوی کلمه ی unique است، وقتی که این عنصر p، تنها عنصر p در میان عناصر خواهر و برادر است را انتخاب کن. دستور مذکور به این معنی نیست که: هر عنصر p که خصوصیت class آن حاوی کلمه ی unique است؛ وقتی که این عنصر، تنها عنصرِ پاراگرافِ در میان خواهر و برادر های خود است، را انتخاب کن.