ترکیب انتخابگرها

یکی از امکاناتی که در اختیار ما قرار دارد ترکیب انتخابگرها بوسیله ترکیب کننده ها می باشد. در CSS ترکیب کننده هایی از قبیل +, ~ و < وجود دارند که به ما این امکان را می دهند تا در استفاده از انتخابگرها پارا کمی فراتر قرار دهیم.

 

انتخابگر نسل (Descendant)

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

بوسیله این انتخابگر می توان رابطه پدر-فرزندی بین عناصر را شبیه سازی کرد. به عنوان نمونه اگر بخواهیم تمام لینک هایی که در header صفحه وجود دارند را به رنگ زرد تبدیل کنیم می نویسیم:

 

header a {
 color: yellow;
}

 

توجه داشته باشید که عناصر می توانند بصورت زیر باشند:

 

<header>
 <a href="">link 1</a>
 <p>
  <a href="">link 2</a>
 </p>
 <a href="">link 3</a>
 <div>
  <span></span>
  <h1>
   <a href="">link 4</a>
  </h1>
 </div>
</header>

 

همانطور که در مثال بالا مشاهده می کنید لازم نیست که لینک ها حتما فرزندان مستقیم header باشند حتی اگر از نوادگان این عنصر باشند هم رنگ آنها به زرد تبدیل می شود.

این امکان وجود دارد که بیشتر از یک سطح هم به داخل حرکت کنیم مثلا فرض کنید می خواهیم تمام لینک هایی که در عناصر menuیی که در عناصر nav قرار دارند را انتخاب کنیم. می توانیم بصورت زیر عمل کنیم:

 

nav menu a {
  
}

 

اما بهتر است از این روش استفاده نکنیم و از کلاس ها که روش بهینه تری هستند بهره ببریم. به این معنی که به تمام عناصر a در HTML یک کلاس مخصوص بدهیم و سپس در CSS از طریق نام آن کلاس این عناصر را هدف قرار دهیم. در مطالب آینده دلیل این کار را خواهیم دانست.

 

انتخابگر فرزند

زمانی که از انتخابگر نسل برای هدف قرار دادن فرزندان عناصر استفاده می کنیم امکان هدف قرار گرفته شدن عناصر نوه, نتیجه و غیره هم وجود دارد :)

حال اگر بخواهیم فقط فرزندان مستقیم یک عنصر را پیدا کنیم چه؟

بوسیله علامت < که یکی دیگر از ترکیب کننده ها می باشد می توان به این هدف رسید.

فرض کنید HTMLی بصورت زیر داریم:

 

<article>
  <header></header>
  <div class="article-body">    
    <a href=""></a>
    <p>
      <a href=""></a>
    </p>
    <a href=""></a>
  </div>
</article>

 

برای اینکه فقط لینک هایی که فرزندان مستقیم عنصر .article-body هستند را انتخاب کنیم می توانیم بصورت زیر عمل کنیم:

 

.article-body > a {

}

 

در این مثال اگر از علامت < استفاده نکنیم دیگر لینک های موجود در آن عنصر را نیز هدف قرار خواهیم داد.

در اینجا هم می توانیم بیشتر از یک سطح پیشروی کنیم:

 

nav > menu > li > a {

}

 

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

 

انتخابگر داداش-آبجی بعدی

نام جدی تر این انتخابگر همزاد یا Adjacent Sibling می باشد :)

فرض کنید عناصری بصورت زیر داشته باشیم:

 

<p class="first-text"></p>
<p>قراره منو بگیرید</p>
<p></p>
<p></p>

 

بوسیله این انتخابگر می توانیم دقیقا عنصر کنار پاراگرافی که کلاس first-text دارد را هدف قرار دهیم:

 

.first-text + p {
 /* گرفتیمش */
}

 

آیا می توانید حدس بزنید اگر برای عناصر بالا چنین دستوری بنویسیم چه اتفاقی می افتد؟

 

p + p {
  color: red;
}

 

این چطور؟

 

p + p + p {
  color: red;
}

 

 

انتخابگر داداشها-آبجیهای بعدی

انتخابگر قبلی فقط امکان انتخاب عنصری که دقیقا بعد از عنصر مورد نظر قرار داشت را به ما می داد. اما با استفاده از علامت ~ در انتخابگر General Sibling می توان عنصرهای بعدی را نیز هدف قرار داد:

 

<section>
  <h2></h2>
  <p></p>
  <a href=""></a>
  <span></span>
  <p></p>
  <p></p>
  <p></p>
  <time></time>
  <p></p>
</section>

 

در نمونه بالا تمام عناصر موجود فرزندان section می باشند. یعنی تمام آنها خواهر برادر هستند. حال می توان تمام عناصر پاراگرافی (p) که بعد از عنصر h2 آمده اند را بصورت زیر انتخاب کرد:

 

h2 ~ p {
 /* پنج تا پاراگراف گرفتیم */
}

 

 

اتصال انتخابگرها

می توانیم انتخابگرهای مختلف را به هم بچسبانیم و عناصر مورد نظرمان را انتخاب کنیم. به عنوان مثال فرض کنید عناصر مختلفی کلاس large-font داشته باشند اما ما می خواهیم فقط پاراگراف هایی که این کلاس را دارند هدف قرار دهیم. کافی است بصورت زیر عمل کنیم:

 

p.large-font { }

 

همینطور می توان دو کلاس را به هم متصل کرد:

 

.text.large-font { }

 

یعنی عناصری که علاوه بر کلاس large-font دارای کلاس text نیز می باشند.

 

<p class="text large-font"></p>

 

ترکیب و اتصال انتخابگرها بر روی ارجحیت دستورات تاثیر می گذارد که در مطالب آینده این موضوع را بررسی می کنیم.