چگونه استایلی خاص را به چندین کلاس دارای کلمات مشترک در نامشان، اعمال کنیم؟

هامش

همون طور که قبلاً گفته شد به تمام سوالات وب شما پاسخ می دم (البته اگر بتونم 🙂 ) و گلچین سوالاتتون رو در بخش چگونه ها منتشر می کنم. برای اینکه سوالاتتون رو مطرح کنید می تونید بجز بخش پرسش و پاسخ اسکیلدآپ، تو شبکه های اجتماعی که لینک هاشون در قسمت بالایی سایت در دسترس هست با من در تماس باشید. امیدوارم بتونم در یادگیری توسعه وب بهتون کمک کنم 🙂

انتخابگر ها در CSS

فرض کنید می خواهیم یک استایل معین رو به یک سری کلاس ها یا آی دی ها یا … که در فایل HTML درج شدن، اعمال کنیم. مثلاً تمام کلاس هایی که داخل اسمشون عبارت “example” وجود داره رنگ قرمز داشته باشن! این کار رو به راحتی به کمک انتخابگر (Attribute selectors) در CSS قابل انجام هست.

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

حالا به یک مثال از حالت کلی نوشتار کد CSS توجه کنید:

div[class*="example"] {
color: Red;
}

کد بالا به این معنی هست که همه تگ های Div که دارای کلاسی هستند که در نام اون کلمه example وجود داره، قرمز رنگ باشند. در این مثال شما می تونید بجای Div تگ اختیاری خودتون رو بنویسید یا چیزی ننوسید تا تمام تگها در نظر گرفته بشه (درمورد بقیه هم می تونید چیزی ننویسید تا محدوده انتخاب شما وسیع تر بشه بجز اتربیوت که باید نوشته بشه) و بجای Class می تونید از انواع اتربیبوت های تگهای HTML مثل href ، lang یا … استفاده کنید تا فقط تگ هایی در نظر گرفته شوند که دارای این اتریبوت هستند و بجای example کلمه ای که بصورت مشترک در تمام اتربیتوت ها مورد نظرتون قرار داره بنویسید. و اما بجای * می تونید  از کاراکتر های مختلفی استفاده کنید که هر کدوم معنای خاص دارند که در بصورت کامل توضیح خواهم داد.

حالت های مختلف

[attr]

المانی (بخش از کد HTML مثل تگ ها) که دارای اتریبوت attr باشد. نام اتریبوت های مختلف داخل تگ های HTML مانند: class , id , lang , href , style و…

[attr=value]

المان هایی با اتریبوت attr که دقیقاً برابر با کلمه value باشد.

[attr~=value]

المان هایی که اتریبیوتی با نام attr دارند که مقدار آن لیستی از لغات باشد که توسط فاصله از یکدیگر جداشده اند و یکی از آن لغات دقیقاً value باشد

[attr|=value]

المان هایی که اتریبیوتی با نام attr دارند که مقدار آن دقیقا برابر است با value یا آنکه با value آغار می شود و بلا فاصله بعد از آن یک “-” (U+002D) (همان خط تیره یا دش) وجود دارد.

[attr^=value]

المان هایی که اتریبیوتی با نام attr دارند که مقدار آن برابر با عبارتیست که ابتدای آن پیشوندی با کلمه value داشته باشد.

[attr$=value]

المان هایی که اتریبیوتی با نام attr دارند که مقدار آن برابر با عبارتیست که انتهای آن پسوندی با کلمه value داشته باشد.

[attr*=value]

المان هایی که اتریبیوتی با نام attr دارند که مقدار آن برابر با عبارتیست که در آن کلمه value وجود داشته باشد.

[attr operator value i]

اگر در انتهای براکت از حرف i یا I استفاده شود دیگر بزرگی یا کوچکی حروف در نظرگرفته نخواهد شد (برای حروف و کاراکتر های ASCII).