فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

انواع selector در css

انواع selector در css:

از selector ها در CSS برای پیدا کردن و یا انتخاب یک عنصر HTML براساس مقدار name ، id ، class و صفات آن عنصر استفاده میشود.

selector id:

انتخاب کننده ی id ، از صفت id  عنصر HTML جهت پیدا کردن یک عنصر منحصر به فرد استفاده میکند.

مقدار id یک عنصر در صفحه باید منحصر به فرد باشد. به همین دلیل انتخاب کننده ی id نیز یک عنصر منحصر به فرد را انتخاب میکند.

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

مثال:در کد زیر فقط به عنصری با شناسه “id=”para1 اعمال میشود.

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

selector class:

انتخاب کننده ی class عناصری را انتخاب میکند که دارای صفت class خاصی باشند.

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

در نمونه مثال زیر تمام عناصری که دارای مقدار “class=”center باشند، وسط چین شده و مقدار رنگ آنها به قرمز تغییر خواهد کرد:

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

همان طوری که در مثال زیر نشان داده شده است  میتوان دایره انتخاب selector را به یک نوع عنصر محدود کرد.

در مثال زیر تنها عناصر پاراگرافی (<p>) که دارای مقدار “class=”center باشند،وسط چین شده و رنگ قرمز روی آنها اعمال میشود.

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

عناصر HTML میتوانند چندین مقدار برای صفت class داشته باشند.

در نمونه مثال زیر عنصر پاراگراف دارای دو مقدار center و large برای صفت class است.هر کدام میتوانند استایل جداگانه ای در CSS داشته باشند.

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

نکته : مقدار صفت class برای یک عنصر HTML نمیتواند با مقدار عددی آغاز شود.

انتخاب کننده های گروهی(Grouping Selector):

در این بخش به آموزش Grouping Selector در css می پردازیم.

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

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

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

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


بهتر است برای صرفه جویی در نوشتن کد از selector های گروهی استفاده کنید.

کد بالا را میتوان توسط انتخاب کننده های گروهی به شکل زیر باز نویسی کرد. در این روش انتخاب کننده های توسط علامت ویرگول (,) از هم جدا میشوند :

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

دیدگاه‌های نوشته