شبه کلاس ساختاری

با استفاده از شبه کلاس های ساختاری می توان یک عنصر را با توجه به جایگاه عنصر در ساختار سلسله مراتبی HTML و همچنین جایگاه عنصر در درون عنصر پدرش انتخاب کرده و style موردنظر را روی آن اعمال کرد.

هر سند HTML دارای یک ساختار درختی می باشد. به عنوان نمونه می توانیم ساختار زیر را در نظر بگیریم :

<html>
    <head>
      <title>
      </title>
    </head>
   <body>
      <h1>Header</h1>
      <p> A paragraph of <strong> important </strong> text </p>
   </body>
</html>

روابط بین هر یک از تگ های موجود در این ساختار درختی را می توان با استفاده از شکل زیر نمایش داد :

روابط موجود در این ساختار عبارتند از :

ansector : تگ html پدر تمامی تگ های موجود در یک سند HTML می باشد و به آن در اصطلاح ansector (جد) گفته می شود. همچنین تگ body نیز پدر تمامی تگ های موجود در داخل خود بوده و برای تگ های فرزند خود (در اینجا p , h1 , strong) یک ansector می باشد.
descendant : تگی که در داخل تگ های دیگر قرار گیرد در اصطلاح descendant (زاده ، نواده) نامیده می شود. در شکل بالا تگ body نواده ی تگ html است و تگ h1 نیز نواده ی هر دو تگ body و html می باشد.
parent : در شکل بالا نزدیکترین پدر(نزدیکترین ansector) تگ strong تگ p می باشد، بنابراین تگ p نقش parent را برای تگ strong دارد.
child : تگی که به طور مستقیم داخل تگ دیگری قرار گرفته باشد یا به عبارت دیگر فرزند مستقیم تگ دیگری باشد در اصطلاح child نامیده می شود. در شکل بالا تگ h1 نقش child را برای تگ body دارد.
sibling : تگ هایی که دارای parent یکسان هستند در اصطلاح sibling یا برادر یکدیگر نامیده می شوند. در مثال بالا تگ های h1 و p و همچنین تگ های head و body نسبت به یکدیگر دارای نقش sibling هستند و در اصطلاح برادر یکدیگر می باشند.

به ساختار فوق در اصطلاح Document Object Model یا به صورت خلاصه DOM گفته می شود. در css از این ساختار می توان برای تخصیص style به عناصر موجود در صفحه استفاده کرد. با استفاده از ساختار درختی فوق و با توجه به موقعیت قرارگیری یک عنصر در ساختار HTML می توان برای آن عنصر یک style تعریف کرد.

انتخاب اولین، آخرین و تنها عنصر مجموعه

با استفاده از شبه کلاس های زیر می توان اولین، آخرین و تنها عنصر عضو یک مجموعه از عناصر را برای اعمال دستورات CSS انتخاب کرد:

first-child :
عنصری را که اولین فرزند پدر خود باشد را انتخاب می کند.
last-child :
عنصری را انتخاب می کند که آخرین فرزند پدر خود باشد.
only-child :
عنصری را انتخاب می کند که تنها فرزند پدر خود باشد و هیچ برادری نداشته باشد.
first-of-type :
عنصری را انتخاب می کند که اولین عنصر از نوع خود در بین تمام برادرانش باشد.
last-of-type :
عنصری را انتخاب می کند که آخرین عنصر از نوع خود در بین برادرانش باشد.
only-of-type :
عنصری را انتخاب می کند که تنها عنصر از نوع خود در بین برادرانش باشد.این عنصر می تواند برادران دیگری داشته باشد اما نه از نوع خود.

تفاوت بین شبه کلاس های child و of-type در نوع رابطه ی عناصر هدف این شبه کلاس ها با عناصر پدرشان می باشد .به عنوان مثال شبه کلاس :first-child روی عنصری اعمال می شود که اولین عنصر درون پدر خود باشد اما شبه کلاس :first-of-type روی عنصری اعمال می شود که اولین عنصر از نوع خود درون عنصر پدرش باشد.

مثال:

<div id=”parent”>
   <h3>climate</h3>
   <p> some text </p>
   <h3>Getting there </h3>
</div>

h3:first-child{
color:blue;
}

در مثال فوق استفاده از هر دو شبه کلاس child و of-type نتیجه یکسانی دارد زیرا اولین فرزند (first child ) همیشه اولین عنصر از نوع خودش ( first of type ) نیز می باشد اما اولین عنصر از یک نوع خاص لزوما همیشه اولین عنصر فرزند نمی باشد.

مثال:

<div id=”parent”>
   <a href=”#main”>skip to main content </a>
   <h3>climate</h3>
   <p> some text </p>
   <h3>Getting there </h3>
</div>

h3:first-of-type{
color:blue;
}

در این مثال عنصر h3 اولین عنصر از نوع خودش (first-of-type) می باشد اما اولین عنصر فرزند پدرش ( first-child ) نیست بنابراین در این حالت فقط شبه کلاس first-of-type قابل استفاده است.(عکس مثال قبل )

نکته: هم پوشانی و تطابق بین شبه کلاس های ذکر شده همواره باید مورد توجه قرار بگیرد.گاهی اوقات شبه کلاس های first ، last ، only اشاره به یک عنصر مشترک دارند. در انتخاب و استفاده از شبه کلاس ها باید احتیاط کرد. شبه کلاس های only-type انعطاف پذیری بیشتری دارند اما شبه کلاس های child میزان کنترل بیشتری را در اختیار ما قرار می دهند. به عنوان مثال استفاده از شبه کلاس :first-child به این معنی است که” این style را روی عنصری اعمال کن که هیچ عنصر برادری قبل ار این عنصر وجود نداشته باشد.”

شبه کلاس :first-child و :last-child برای سبک دهی به قسمت ناوبری سایت مناسب می باشند.( navigation bar )

انتخاب عناصر بر اساس موقعیت آنها در داخل یک مجموعه

اگر بخواهید یک عنصر را انتخاب کنید که نه اولین عنصر است و نه آخرین عنصر اما موقعیت این عنصر در بین برادرانش و در داخل یک مجموعه ، یک موقعیت ثابت و مشخص است باید از شبه کلاس های ساختاری زیر استفاده کرد:

nth-child() :
nامین فرزند عنصر پدرش ( n امین عنصر مجموعه را ) با استفاده از مقدار مشخص شده در داخل پرانتز انتخاب می کند.
nth-last-child() :
n امین فرزند عنصر پدرش را با شروع شمارش از انتهای مجموعه با استفاده از مقدار مشخص شده در داخل پرانتز انتخاب می کند.
nth-of-type() :
n امین برادر از نوع خودش را در درون عنصر پدر و با استفاده از مقدار مشخص شده در داخل پرانتز انتخاب می کند.
nth-last-of-type() :
n امین برادر از نوع خودش را در درون عنصر پدر، با شروع شمارش از انتهای مجموعه و با استفاده از مقدار مشخص شده در داخل پرانتز انتخاب می کند.

برای استفاده از شبه کلاس های فوق باید یک مقدار را به عنوان پارامتر شمارنده در داخل پرانتز قرار دهیم. این پارامتر موقعیت عنصر را در درون مجموعه عناصر پدرش مشخص می کند. این مقدار می تواند یک عدد، یک کلمه کلیدی و یا یک فرمول ریاضی باشد.

مشخص کردن موقعیت یک عنصر با استفاده از اعداد

با استفاده از اعداد می توان موقعیت یک عنصر را در درون مجموعه پدر مشخص کرد. بر خلاف javascript و بیشتر زبانهای برنامه نویسی دیگر، در CSS اندیس مجموعه از عدد یک شروع می شود.

مثال :

p:nth-of-type(2)

این دستور دومین پاراگراف درون عنصر پدرش را انتخاب می کند.

p:nth-last-of-type(2)

شبه کلاس های nth-last-* شمارش را از انتهای مجموعه عناصر پدر شروع می کنند. در نتیجه دستور فوق پاراگراف یکی مانده به آخر را انتخاب می کند.

مشخص کردن موقعیت یک عنصر با استفاده از کلمات کلیدی

در شبه کلاس های nth-* می توان از دو کلمه کلیدی زیر استفاده کرد:

odd : برای انتخاب عناصر فرد مجموعه
even : برای انتخاب عناصر زوج مجموعه

مثال :

tr:nth-child(odd)

این دستور تمامی سطرهای فرد جدول را انتخاب می کند. اگر سطری را به جدول اضافه کرده و یا از آن حذف کنید، مرورگر به صورت خودکار style را با جدول جدید تطبیق خواهد داد.

مشخص کردن موقعیت یک عنصر با استفاده از فرمول ریاضی و به صورت بازگشتی

می توان یک ترتیب بازگشتی از عناصر را برای اعمال style موردنظر انتخاب کرد؛ به عنوان مثال اعمال style روی سطرهای مضرب سه (۳،۶،۹، … ) از یک جدول. برای اینکار باید از فرمول ریاضی an±b استفاده کرد. در این فرمول a و b دو عدد ثابت و n یک متغیر است. متغیر n از صفر شروع شده و یکی یکی به مقدار آن اضافه می شود تا زمانیکه به انتهای مجموعه برسیم و مقدار بدست آمده از فرمول کوچکتر از کل عناصر مجموعه باشد.

مثال :

tr:nth-child(3n+1)

دستور فوق سطرهای اول، چهارم، هفتم و . . . را از یک جدول انتخاب می کند :

(3n) + 1
(3*0) + 1 = 1
(3*1) + 1 = 4
(3*2) + 1 = 7
. . .

در صورت استفاده از عملگر تفریق در فرمول (an-b) ، مقدار b از مقدار حاصلضرب کم خواهد شد. در این حالت مقادیر کمتر از یک (مقادیر منفی) نادیده گرفته می شوند.

مثال :

tr:nth-child(5n-2)

(5*0) - 2 = -2      < 1
(5*1) - 2 = 3
(5*2) - 2 = 8
. . .

حالات خاص فرمول an±b

سه حالت خاص زیر برای فرمول an±b وجود دارد. در تمامی این حالات از مقدار منفی برای متغیر n استفلده شده است.

-۱n+b یا -n+b :
در این حالت فقط b عنصر اول مجموعه انتخاب شده و باقی عناصر نادیده گرفته می شوند. به عنوان مثال دستور زیر فقط سه سطر اول جدول را انتخاب کرده باقی سطرها را نادیده می گیرد:

tr:nth-child(-n+3)

-an-b :
در این حالت تمامی تکرارهای فرمول کوچکتر از یک بوده و در نتیجه هیچ عنصری انتخاب نخواهد شد.
-an+b :
در این حالت امکان تولید عدد بزرگتر از یک وجود دارد، فرمول محاسبه شده و اعداد بزرگتر یا مساوی یک انتخاب خواهند شد.

مثال :

tr:nth-child(-2n+8)

(-2*0) + 8 = 8
(-2*1) + 8 = 6
(-2*2) + 8 = 4
(-2*3) + 8 = 2
(-2*4) + 8 = 0  < 1

مرورگر IE8 و قبل از آن شبه کلاس های nth-* را پشتیبانی نمی کنند.

شبه کلاس ساختاری

انتخاب اولین، آخرین و تنها عنصر مجموعه

انتخاب عناصر بر اساس موقعیت آنها در داخل یک مجموعه

مشخص کردن موقعیت یک عنصر با استفاده از اعداد

مشخص کردن موقعیت یک عنصر با استفاده از کلمات کلیدی

مشخص کردن موقعیت یک عنصر با استفاده از فرمول ریاضی و به صورت بازگشتی

حالات خاص فرمول an±b

دیدگاهتان را بنویسید لغو پاسخ