وبلاگ با برنامه
» سلکتور های css را بشناسید!
سلکتور های css را بشناسید!
درود! در این مقاله با مباحث پایه css کار داریم. میخواهیم بدانیم سلکتور های css چه انواعی دارند و یک مثال از هریک کار کنیم! میتوانید از این لینک اطلاعات لاتین را مشاهده کنید! کار اصلی سلکتور های css این است که المان های html را سلکت کنند تا ما بتوانیم استایل خاصی به یک المنت سلکت شده بدهیم.
نکته1: این سلکتور ها را شما میشناسید و با انها کار کردید. وقتی یک کلاس به یک تگ در html داده میشود همان کلاس در css با یک نقطه سلکت میشود. Id های یک تگ هم با هشتگ سلکت میشوند.
.class-name #id-name
نکته2: سه خط زیر رابیینید! حال فرض کنید دو کلاس نوشته شوند. چه معنایی دارند؟
.class1 .class2 .class1.class2 .class1>.class2
هر یک از سه خط بالا سه معنی متفاوت دارند. در حالت خاصی خط اول و سوم برابرند.
بواسطه خط اول المنتی سلکت میشود که دارای کلاس class2 باشد و داخل المنت مادر یا مادر بزرگ با کلاسی به نام class1 قرار داشته باشد. بواسطه خط سوم المنتی سلکت میشود که کلاس2 بلافاصله بعد از المنت با کلاس1 امده باشد. در خط سوم ان المنت سلکت نمیشود که نوه ی کلاس calss1 باشد. حتما باید مادر باشد.
درباره خط دوم باید گفت یک المنت که هردو کلاس class1 وclass2 را بصورت همزمان دارا باشد سلکت میشود. یعنی المنتی که فقط یک کلاس از این دو را دارد مدنظر نیست.
نکته3: خط زیر رابیینید! وقتی از ستاره استفاده میشود همه المنت ها سلکت میشوند.
*{ color:gray }
نکته4: خط زیر رابیینید! وقتی المنتی با کلاس خاصی را میخواهیم سلکت کنیم این کد استفاده میشود. اینجا تگ p ای سلکت خواهد شد که دارای کلاس class1 باشد.
p.class1{ … }
نکته5: خط زیر رابیینید! اگر بخواهیم یک سری استایل را به چند المنت اختصاص دهیم انگاه از کاما استفاده میکنیم!
.class1, .class2, p.class-name{ … }
نکته6: خط زیر رابیینید! وقتی بخواهیم المنتی را که بلافاصله بعد از المنتی دیگر امده است انتخاب کنیم، المنت اول را با علامت مثبت به المنت دوم میچسبانیم.
.class1+.class2{ … }
نکته7: خط زیر رابیینید! اگر بخواهیم تمام المنت هایی که بعد از المنتی دیگر امده را سلکت کنیم از علامت تقریب استفاده میکنیم.
.class1~.class2{ … }
نکته8: اگر درباره اتریبیوت یک المنت اطلاعاتی داشته باشیم ولی خود المنت را نشناسیم از این سلکتور استفاده میشود:
[href] { … }
خط بالا برای تمام المنت هایی است که اتریبیوت href دارند. مثال کد های html پایین را ببینید!
<a href=”#something”> something </a>
از مطالعه شما سپاسگذارم!!
