راکت

خلاصه کردن کلاس ها در css

5 پاسخ

سلام ، من میخوام با css بنویسم که اگه تگ i فلان کلاس ها رو با هم دیگه داشت یه کاریو انجام بده
به این شکل نمیخوام باشه خیلی طولانیه

i.one , i.two , i.three{
    color: red;
}

این شکلی هم نمیدونم درسته یا نه

i:is(.one .two .three){
    color: red;
}

ممنون میشم اگه چن تا راه حل خوب معرفی کنید
@milad @ali.bayat

ثبت پرسش جدید

پاسخ‌ها

5
میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

اگر درست متوجه شده باشم میخوای انتخابگری درست کنی که در صورتی که کلاس های one, two, three رو همزمان داشت، شمایلی رو بگیره.
اگر یکی شون یا دوتاشون رو داشته باشه، نمیخوای انتخابش کنی. هر وقت همزمان هر سه کلاس رو باهم داشت، خصوصیات رو بهش نسبت بدی.

کافیه اینهارو پشت سرهم، بدون فاصله بزنی. یک حالت زنجیره ای داشته باشند باهم:

p.one.two.three {
    color: red;
}

<p class="one two three">text</p>   // اعمال میشه
<p class="one two">text</p> // اعمال نمیشه
<p class="one">text</p> // اعمال نمیشه
محمدحسن یگانه
محمدحسن یگانه
@mhyeganeh

تخصص: Full-Stack Web Developer Freelancer

@cfarhad
کدی که در بخش اول نوشتید با توضیحی که بالاش قید کردید دو چیز کاملا متفاوت هستند...!

شاید پاسخ شما همین‌جا باشد

علی بیات
علی بیات
@ali.bayat

تخصص: توسعه دهنده ارشد وب

دوستمون @milad همیشه در حیطه سوالات فرانت ،جوابهای خوبی میدند
این بار هم جوابشون کامل بود.


اما پیشنهاد من اینه که تا وقتی سینتکس اصلی رو به خوبی یاد نگرفتید دنبال راه میان بر نباشید

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

@ali.bayat
تشکر از شما مهندس بیات

احساس می کنم که داخل انجمن راکت بیشتر نفرات در حوزه ی طراحی سایت سمت سرور فعالیت دارند و برای موبایل و همچنین طراحی رابط کاربری، نفرات کمتری حضور دارند و مشارکت می کنند. / امیدوارم بیشتر درین بخش مشارکت رو ببینیم، بهره ببریم از حضور دوستان.

آقای یگانه هم هستند که کم می نویسند، ولی پُر بار می نویسند و با حوصله 👍

اشکان احمدی
اشکان احمدی
@ashkanahmadi

تخصص: front-end develo

شما کافیه برای هر کدوم از li هاتون که میخواید یک نوع style رو به خودشون بگیرن یه کلاس مشترک بدید. مثلا اینطوری:

<i class="list one">متن اول</i>   
<i class="list two">متن دوم</i> 
<i class="list three">متن سوم</i> 

حالا اگر در داخل فایل css تون کد زیر رو بنویسید:

i.list{
    color: red;
}

این style برای هر سه i که کلاس list رو دارن اعمال میشه

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام