گوشی iPhone 12 Pro Max
مهر 24, 1399
Vue.js چیست؟
مهر 24, 1399
نمایش همه

انواع سلکتورها در CSS3

در CSS3 انواع سلکتورهای Element، Class، id، Universal، Attribute و سلکتورهای پیچیده دیگر را داریم.

 

برای این سلکتور ما باید از خود المان HTML استفاده کرده و استایل ها را به آن اعمال کنیم. برای مثال اگر در صفحه ما المان h1 را داریم و همچنین می خواهیم همه المان های h1 صفحه ما رنگ متن آن ها مشابه یکدیگر باشند میتوان از خود المان استفاده کرد. باید به صورت زیر المان را در فایل CSS خود به کار ببرید:

h1 {
color:red;
}

با اضافه کردن این خصیصه به المان های صفحه میتوان از آن استفاده کرد. برای مثال یکسری پاراگراف در صفحه داریم و میتوانیم به آن ها یک کلاس به صورت "class="paragraph اضافه کنیم. همانطور که میبینید برای اضافه کردن یک کلاس به یک المان از کلمه class و بعد علامت مساوی و نام کلاس را در داخل double quotation می نویسیم. دقت داشته باشید سلکتور کلاس منحصر به فرد نیست. یعنی میتوان آن را به چندین المان اعمال کرد و همچنین هر المانی میتواند چندین کلاس داشته باشد. در فایل CSS خود برای استفاده از این کلاس باید از علامت نقطه و بعد نام کلاس به صورت زیر استفاده کنید. در مثال زیر رنگ متن همه پاراگراف هایی که این کلاس را دارند آبی خواهد شد.


.paragraph {
color:red;
}

سلکتور id در هر المان منحصر به فرد است و یک المان دیگر نمیتواند id با آن نام داشته باشد. وقتی به یک المان خاص یک استایلی بدهیم که مختص آن المان باشد میتوانیم از سلکتور id استفاده کنیم. برای به کار بردن سلکتور باید از علامت # در فایل CSS استفاده کرد. نحوه نوشتاری ان در HTML به این صورت می باشد: "id="p1 و در CSS به صورت زیر مورد استفاده قرار می گیرد:


#p1 {
color:blue;
}

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


* {
color:red;
}

سلکتور بعدی Attribute است. برای مثال در HTML المان button را داریم که این المان دارای خصیصه disabled است. می توانیم به همه button ها با خصیصه disabled استایل مشابه به صورت زیر بدهیم:


[disabled] {
color:blue;
}

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

ویدئوهای مربوطه را می توانید در صفحه دوره ها ببینید.

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

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