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

یکی از امکاناتی که در اختیار ما قرار دارد ترکیب انتخابگرها بوسیله ترکیب کننده ها می باشد. در 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>

 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

9 دیدگاه برای “ترکیب انتخابگرها

  1. سلام خیلی ممنون از سایت خوبتون.من دوتا مشکل دارم این تصویر رو ببینید تصویر اول عکسها باید با تمام قسمتی که درش قرار داره fill بشه اما من کدشو نمیدونم و باید چجوری به تصویر این خصوصیت رو بدم خیلی.پیشاپیش از راهنمایی تون ممنون.

  2. خدایی این چه مثالیه، مخم هنگید، p+p یعنی پاراگراف دوم انتخاب میشه درسته؟
    خب اما ما سه تا پاراگراف پشت سر هم داشتیم، خب پاراگراف سوم هم نسبت به پاراگراف دوم میشه دومی!
    یعنی پاراگرافی که کنار یه پاراگراف دیگه اومده، درسته؟
    آخه اولی پاراگراف با کلاس بود میشد تشخیص داد اما دومی که کلاس نداره، پس از کجا میفهمه
    اصن من گیج شدم!
    میشه گفت اگه بیشتر از دوتا پاراگراف کنار هم بود قزمز بشن از دومی به بعد؟
    یا p+p+p یعنی اگه سه تا پاراگراف کنار هم بود سومی قرمز بشه؟
    میشه یه کم توضیح بدی مهندس، فقط بهم نخند و توضیح بده ! هه هه :دی


    1. p + p

      فرض کن یکی یکی بریم سراغ تگ های پاراگراف ها و ازشون بپرسیم آیا تو دقیقا بعد از یک
      تگ پاراگراف اومدی؟ اگر گفت آره رنگشو قرمز می کنیم

      وقتی از اولی بپرسیم میگه نه. از دومی که بپرسیم میگه بععللههههههههههه و سومی و تا آخر همین جوابو میدن

      حالا برای این مثال


      p + p + p

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

      از اولی بپرسیم میگه چی میگی من حتی بعد از یکی هم نیومدم چی برسه به دوتا

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

      حالا اگر از سومی بپرسی چی میگه؟؟؟

      آفرین میگه:

      بععععلههههههههههههههه

      اگر هنوزم مشکل هست یه چندتا مثال حل کن جا میافته مطلب حتما

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *