آموزش CSS | قسمت سوم انتخابگر ها "Selectors"

تاریخ: دوشنبه, 27 مرداد 1399

---

---

آموزش  CSS : سلام به همراهان کلاس برتر .

با یک قسمت دیگر از آموزش CSS خدمت شما هستیم ، در این قسمت میخواهیم به انتخاب کنندگان در CSS بپردازیم ؛ با ما همراه باشید .

 

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

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

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

 

در این صفحه اساسی ترین انتخاب کنندگان CSS توضیح داده می شود.

 

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

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

مثال :

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

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

 

انتخاب کننده شناسه "id"

     انتخاب کننده شناسه از ویژگی id یک عنصر HTML برای انتخاب یک عنصر خاص استفاده می کند.

     شناسه یک عنصر در یک صفحه منحصر به فرد است ، بنابراین از انتخاب id برای انتخاب یک عنصر منحصر به فرد استفاده می شود !

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

مثال :

     "para1" همان id است که ما در سند HTML خود انتخاب کرده ایم .

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

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

 

 

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

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

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

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

مثال :

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

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

 

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

مثال :

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

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

 

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

مثال :

     در این مثال عنصر <p> مطابق کلاس "center" و کلاس  "large" طراحی می شود :

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

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

 

انتخابگر کلی CSS

     انتخاب کننده کلی ( * ) تمام عناصر 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;
}

 

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

 

Example description	Example	Selector
همه عناصر با کلاس  "intro" را انتخاب می کند	.intro	.class
عنصر را با شناسه "firstnam" انتخاب می کند	#firstname	#id
همه عناصر را انتخاب می کند	*	*
همه عناصر <p> را انتخاب می کند	p	element
همه عناصر <div> و همه عناصر <p> را انتخاب می کند	div, p	element, element

 

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

 

---

---