محتوای آموزشی

گروه بندی و ترکیب انتخاب گرهای CSS

گروه بندی و ترکیب انتخاب گرهای CSS

در مقالات قبلی به طور مقدماتی با سلکتورهای CSS آشنا شدید.در این مقاله در مورد گروه بندی و ترکیب سلکتورها صحبت خواهیم کرد که کمک شایانی به بهینه سازی کدهای CSS خواهند کرد.

گروه بندی انتخابگرها

گروه بندی انتخابگرها به این معنی است که اگر برای دو یا چند انتخابگر استایل های یکسان وجود دارند می توان آن انتخابگرها را گروه بندی کرد تا از نوشتن کد تکراری جلوگیری شود،به عنوان مثال کد زیر را در نظر بگیرید.

.info {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
  background-color: blue;
}

.success {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
  background-color: green; 
}

.error {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
  background-color: red;
}

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

display: block;
margin: 32px 16px;
padding: 16px;
text-align: center;

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

.info,
.success,
.error {
  display: block;
  margin: 32px 16px;
  padding: 16px;
  text-align: center;
}
.info {
  background-color: blue;
}

.success {
  background-color: green;
}

.error {
  background-color: red;
}

به این ترتیب از تکرار کدها جلوگیری کردیم.

نکته : خودداری از تکرار کدها یک اصل در مهندسی نرم افزار می باشد.این اصل Dry (Don’t repeat yourself) نام دارد.

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

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

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

به منظور استفاده از انتخابگر نسل فقط کافی است بین دو انتخاب گر یک فاصله خالی قرار دهیم.به این ترتیب می توان یک رابطه والد - اولاد را بین عناصر شبیه سازی کرد.به عنوان مثال اگر بخواهیم لینک های موجود در فوتر را به رنگ خاکستری در بیاوریم می توانیم از قطعه کد زیر استفاده کنیم.

footer a {
 color: gray;
}

توجه داشته باشید که لزومی ندارد لینک ها حتما مستقیما داخل تگ footer قرار داشته باشند و کدها می توانند به صورت زیر نیز باشند.

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

همانطور که گفتیم لزومی ندارد لینک ها حتما مستقیما داخل تگ footer footer قرار داشته باشند و حتی اگر از نوادگان footer هم باشند،باز هم رنگ آنها به خاکستری تغییر خواهد کرد.

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

nav menu a {
  
}

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

همانطور که در انتخابگر نسل بیان کردیم زمانی که از این سلکتور استفاده می کنید تمام عناصر که داخل عنصر والد قرار می گیرند نیز تحت تاثیر قرار خواهند گرفت،اما برخی مواقع نیاز داریم تا فقط فرزندان مستقیم یک عنصر را انتخاب کنیم.برای این منظور می توانیم از علامت < استفاده کنیم.به عنوان مثال قطعه کدی که در مورد footer مثال زدیم را در نظر بگیرید

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

فرض کنید این بار میخواهیم فقط رنگ لینک هایی که مستقیما داخل تگ footer قرار دارند به به رنگ خاکستری تغییر دهیم،برای این منظور می توانیم به صورت زیر عمل کنیم:

footer > a {
color:gray;
}

انتخابگر برادر – خواهر (Adjacent Sibling)

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

<p class="first-paragraph"></p>
<p>عنصری که می خواهیم انتخاب کنیم</p>
<p></p>
<p></p>

حال فرض کنید می خواهیم رنگ پاراگراف دوم را قرمز کنیم،برای این منظور می توانیم با استفاده از علامت + عنصر کنار پاراگرافی که کلاس first-paragraph دارد را هدف قرار دهیم.

.first-text + p {
	color:red;
}

انتخابگر برادر – خواهرهای بعدی (General Sibling)

انتخابگر قبلی فقط امکان انتخاب عنصری که دقیقا بعد از عنصر مورد نظر قرار داشت را به ما می داد. اما با استفاده از علامت ~ در انتخابگر General Sibling می توان تمام عنصرهای بعدی را هدف قرار داد.فرض کنید در همان مثال بالا می خواهیم تمام پاراگراف هایی که بعد از کلاس first-paragraph آمده اند را قرمز رنگ کنیم.برای این منظور می توانیم از انتخابگر General Sibling به صورت زیر استفاده کنیم.

.first-paragraph ~ p {
	color:red;
}

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

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

p.large-font { 
	color: red;
}

می توانیم انتخابگرهای متفاوتی را به هم متصل کنیم.به عنوان مثال فرض کنید لینکی مانند زیر در کد خود داریم:

<a href=’pzof.ir’ id=’test’ class=’link’>شرکت پیشگامان صفر و یک فرساد</a>

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

a#test.link{

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

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد،با ادامه آموزش های CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'