امروز : دوشنبه، 06 تیر 1401

آموزش CSS - انتخابگر ها یا Selectors در CSS

تعداد بازدید: 515

یک انتخابگر CSS ، عناصر HTML را که می خواهید سبک دهید انتخاب می کند .

ما می توانیم انتخابگرهای CSS را به پنج دسته تقسیم کنیم:

  • ساده ( انتخاب عناصر بر اساس نام یا name ، شناسه یا id ، کلاس یا class ) 
  • ترکیبی ( عناصر را بر اساس رابطه خاصی بین آنها انتخاب می کنید )
  • خاص ( عناصر را براساس یک حالت خاص انتخاب کنید )
  • عناصر ( انتخاب و سبک بخشی از یک عنصر )
  • ویژگی ( عناصر را براساس ویژگی یا مقدار ویژگی انتخاب کنید )

در این مقاله اساسی ترین انتخاب کنندگان CSS را توضیح می دهیم .

انتخابگر عنصر CSS :

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

در اینجا ، همه عناصر <p> در صفحه با یک رنگ متن قرمز تراز وسط قرار می گیرند ، 

p {
  text-align: center;
  color: red;
}

 

انتخابگر شناسه CSS :

id یا همان شناسه از ویژگی های یک عنصر HTML است و شما میتوانید برای انتخاب یک عنصر خاص از آن استفاده کنید ، شناسه یک عنصر در یک صفحه منحصر به فرد است ، بنابراین از شناسه ( id ) برای انتخاب یک عنصر منحصر به فرد استفاده می شود !

برای انتخاب یک عنصر با شناسه خاص ، یک کاراکتر هش (#) و سپس شناسه عنصر بنویسید.

مثال :

قانون CSS زیر برای عنصر HTML با شناسه para1 اعمال می شود:

#para1 {
  text-align: center;
  color: red;
}

توجه: نام شناسه نمی تواند با شماره شروع شود !

انتخابگر کلاس CSS :

انتخابگر کلاس ، عناصر HTML را با یک ویژگی کلاس خاص انتخاب می کند ، البته همانطور که در آموزش Html آموختید کلاس میتواند برا چند عنصر باشد ولی شما فقط در اینجا یکبار کلاس را صدا می زنید و روی تمام عنصر ها اعمال می شود 😃 .

برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر ( . ) و به دنبال آن نام کلاس بنویسید .

مثال :

در این مثال تمام عناصر HTML با کلاس center ، قرمز و تراز وسط قرار می گیرند :

#para1 {
  text-align: center;
  color: red;
}

 

همچنین می توانید تعیین کنید که فقط عناصر خاص HTML تحت تأثیر یک کلاس قرار گیرند.

مثال دوم :

#para1 {
  text-align: center;
  color: red;
}

عناصر HTML همچنین می توانند به بیش از یک کلاس اشاره داشته باشند .

مثال :

در این مثال عنصر <p> دارای دو کلاس large و center است که شما میتوانید به هر دو استایل دهید :

<p class="center large">This paragraph refers to two classes.</p>

توجه: نام کلاس نمی تواند با شماره شروع شود !

انتخابگر های همگانی :

انتخابگر همگانی ( * ) همه عناصر HTML موجود در صفحه را انتخاب می کند .

مثال :

قانون CSS زیر بر روی هر عنصر HTML موجود در صفحه تأثیر می گذارد :

* {
  text-align: center;
  color: blue;
}

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

انتخابگر گروه بندی ، تمام عناصر HTML را با همان تعریف استایل انتخاب می کند .

به کد CSS زیر نگاه کنید (عناصر h1 ، h2 و p تعریف یکسانی دارند) :

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

برای به حداقل رساندن کد ، بهتر است گروهی را انتخاب کنید و برای گروه بندی انتخابگرها ، هر انتخابگر را با کاما ( , ) جدا کنید .

مثال :

در این مثال ما انتخاب کنندگان را از کد مثالی بالا گروه بندی کرده ایم :

h1, h2, p {
  text-align: center;
  color: red;
}

 

شرح مثال مثال انتخابگر
  انتخاب می کند  id="testid"  عنصر را با  #testid #id
 را انتخاب می کند class="intro"  همه عناصر دارای  .intro .class
را انتخاب می کند class="intro"  با <p>فقط عناصر  p.intro element.class
 همه عناصر را انتخاب می کند * *
 همه عناصر <p> را انتخاب می کند p element
همه عناصر <div> و همه عناصر <p> را انتخاب می کند div,p element,element

سید مرتضی یثربی

برنامه نویس فرانت و طراح دیزاین وبسایت 😉

blog-author-image