آموزش طراحی وب

ترکیب سلکتورها در CSS

در این جلسه در رابطه با ترکیب سلکتورها در css صحبت میکنیم و با ذکر مثال نحوه ی ترکیب سلکتورها رو خدمتتون آموزش میدم.

 css3

فصل چهارم : Properties در CSS

جلسه بیست و چهارم : ترکیب سلکتورها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

اول از همه بابت تاخیر در بروزرسانی سایت عذرخواهی میکنم . بنا به دلایلی مجبور به تغییر دامنه شدیم و به دلیل سئوی دامنه نمیتونستیم تا مدتی مطلب تو سایت درج کنیم. از این به بعد به صورت مرتب و منظم سایت بروزرسانی میشه.

و اما امروز و در این جلسه قصد دارم در رابطه با ترکیب سلکتورها در css صحبت کنم و با ذکر مثال نحوه ی ترکیب سلکتورها رو خدمتتون آموزش بدم.

 

ترکیب ارثی

در ترکیب ارثی و یا Descendant در css شما تعیین میکنید که مثلا عنصر p درون عنصر div چه استایلی داشته باشه. یعنی میتونید عنصر فرزند رو در درون عنصر والد تعریف کنید و استایل دلخواه رو بهش بدید. به مثال زیر دقت کنید:

در این کد عنصر p فرزند عنصر div محسوب میشه چرا که داخل عنصر div قرار گرفته ، حالا به مثال زیر توجه کنید:

در این کد عنصر p فرزند عنصر div محسوب میشه و عنصر a فرزند عنصر p و همچنین عنصر div محسوب میشه. حالا میخوایم به عنصر p استایل بدیم. در اینجا اگر شما بخواین فقط سلکتور p رو مشخص کنید و استایل بدید ، به تمامی p های درون صفحه اون استایل اعمال میشه ، پس مجبور میشید یه class برای p مشخص کنید و به اون کلاس استایل بدید. اینطوری اگر بخواین برای هر عنصر کلاس تعریف کنید و استایل دهی کنید حجم کدهاتون زیاد میشه.

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

در این کد ما به عنصر والد یه کلاس بنام iranweblearn اختصاص دادیم. حالا میخوایم به عنصر p استایل بدیم.

در این کد اگر توجه کنید متوجه میشید که ما به عناصر p درون کلاس iranweblearn استایل دادیم و گفتیم فونت های تمامی عناصر p قرمز باشن. با کد بالا به تمامی عناصر p این استایل رو میدیم یعنی اگر ۳ یا ۴ تا یا هرچند تای دیگه عنصر p داشته باشیم این استایل براش تعریف میشه .

در این حالت دیگه به تمامی p های صفحه استایل نمیده و فقط به فرزندهای iranweblearn این استایل رو میده.

حالا اگر میخواین عناصر p درون iranweblearn که فرزند اصلی هستند و اصطلاحا نوه محسوب نمیشن (یعنی داخل یه عنصر دیگه قرار نگرفتن و سطح اول در درون کلاس iranweblearn هستند) این استایل رو بگیره باید بصورت زیر تعریف کنید:

با علامت < تعیین میکنید که p های درون کلاس iranweblearn رو پیدا کن که فرزند اصلی باشند یعنی داخل یه عنصر دیگه نباشند و این استایل رو بهش اختصاص بده.

 

حالا اگر بخواین به عنصر a استایل بدید میتونید به صورت های زیر عمل کنید:

در اینجا گفتیم عنصر a درون عنصر p ی کلاس iranweblearn رو پیدا کن و این استایل رو بهش بده.

در این کد هم گفتیم به تمامی عناصر a درون عنصر p که فرزند اصلی کلاس iranweblearn هست این استایل رو بده.

و در این کدهم گفتیم به تمامی عناصر a موجود در کلاس iranweblearn این استایل رو بده.

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

 

اولین عنصر مجاور در css

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

در اینجا ما یک عنصر p درون iranweblearn داریم و یه عنصر p بعد از کلاس iranweblearn داریم. حالا ما میخوایم به عنصر p مجاور و بعدی کلاس irnweblearn استایل بدیم. برای اینکار از علامت + استفاده میکنیم:

در اینجا گفتیم اولین عنصر p بعد از عنصر iranweblearn رو پیدا کن و این استایل رو بهش بده.

حالا دقت داشته باشید که با این کد شما در صفحه به تمامی p های بعد از عناصری که کلاس iranweblearn رو داشته باشن استایل میدید. برای اینکه فقط به این کد استایل بدید یه id تعریف می کنید و به id استایل میدید (چون id منحصر به فرد هست):

 

و حالا کد css این قسمت :

به این صورت شما فقط به این عنصر p استایل میدید نه تمامی عناصر p صفحه.

 

عناصر عمومی مجاور

در مثال قبل شما میتونستید به اولین عنصر مجاور استایل بدید. در این قسمت میخوایم به تمامی عناصر p بعد از weblearn استایل بدیم:

با قرار دادن علامت ~ به تمامی عناصر p بعد از weblearn استایل میدید.

 

خوب دوستان در اینجا آموزش به اتمام میرسه، امیدوارم که مفهوم رو خوب رسونده باشم و این جلسه براتون مفید بوده باشه.

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۴

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین