Css selector چیست؟ به علاوه معرفی مهمترین css selector ها

در CSS برای این که مشخص شود که کدام سبک (style) به کدام عنصر (element) در سند مرتبط است، از قوانین و الگوهای تطبیقی استفاده می کند. به این الگو ها، css selector گفته می شود و چیز های ساده ای مانند نام های تگ ها مانند تگ p برای پاراگراف و یا الگوهای پیچیده ای مانند p#myid > b.highlight که هر تگ b را به یک کلاس از highlight مرتبط می کند را شامل می شود.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

در واقع هر css selector بخشی از فراخوانی استایل css است و مشخص می کند که کدام بخش از صفحه وب باید این استایل را نمایش دهد. به عبارت دیگر css selector یا انتخابگر css شامل یک یا چند ویژگی مشخص است که نحوه استایل گیری یک بخش از html را مشخص می کند.

 

 

انواع Css selector

انواع مختلفی از انتخاب گر css وجود دارد که هر یک در واقع نقش استایل دهی خاصی را بر عهده دارد و در کل نحوه عملکرد آن ها در مرتبط کردن عناصر مختلف خلاصه می شود. در این جا به معرفی چند انتخاب گر بسیار مهم می پردازیم که شناخت آن ها برای هر طراح وبی ضروری است. انواع Css selector ضروری را در ادامه خواهیم شناخت.

Universal Selector

این نوع از Css selector ها برای انتخاب همه عناصر موجود در یک صفحه به کار می روند. هر صفحه html  توسط محتوایی که با تگ ها ساخته شده، ایجاد می شود. هر مجموعه از تگ ها یک عنصر را در صفحه نشان می دهد. به مثال زیر توجه کنید تا با نحوه کار Universal Selector آشنا شوید:

در اینجا این انتخاب گر که به شکل * نشان داده می شود، سه خط کد داخل کروشه که رنگ، قلم و ارتفاع خط را نشان می دهد را به تمام عناصر صفحه html اعمال می کند. نحوه استفاده از این انتخاب گر برای ترکیب های دیگر هم به همین سادگی است.

Element Type Selector

این نوع از Css selector  که به آن Type Selector هم گفته می شود، دو یا سه عنصر هم نام در صفحه را به یکدیگر مرتبط می کند. بنابر این برای مثال یک انتخاب گر از <ul> تمام عناصر هم نام را با یکدیگر مطابقت می دهد و همه آن ها یک استایل را خواهند داشت. به مثال زیر توجه کنید:

با قرار دادن این کد در یک بخش از صفحه، همه عناصر <ul> که در زیر آن قرار دارند از این استایل تبعیت خواهند کرد.

انتخاب گر های ID

انتخاب گر های ID با استفاده از این نماد # پیش از یک رشته از کاراکتر ها اعلام می شود. این رشته از کاراکتر ها توسط توسعه دهنده ها مشخص می شوند. این انتخاب گر هر عنصر html که یک id با کاراکتر های مشابه دارد را با انتخاب گر منطبق می کند. به این مثال توجه کنید.

در این جا بعد از نماد # از container به عنوان ID استفاده شده است. پس css هر جایی که container در متن وجود داشته باشد را با همین استایل فراخوانی خواهد کرد.

Class Selector

این نوع از Css selector یکی از پرکاربرد ترین انتخاب گر ها است. برای اعمال این انتخاب گر از یک نقطه قبل از کاراکتر مورد نظر خود استفاده می کنیم. مانند انتخاب گر های ID این کاراکتر ها هم توسط توسعه دهنده مشخص می شوند. Class Selector همه عناصری که کاراکتر بعد از نقطه مشابهی دارند را با یکدیگر منطبق می کند و به همه آن ها استایل تعیین شده را اعمال می کند. برای درک بهتر به مثال زیر توجه کنید:

با اعمال این انتخاب گر css  همه عناصری که دارای کاراکتر box باشند با همین استایل نمایش داده خواهند شد.

Descendant Combinator

Descendant Combinator به شما اجازه می دهد دو یا چند انتخاب گر را ترکیب کنید تا بتوانید در روش انتخاب خود ویژگی های خاص تری را اعمال کنید. به مثال زیر توجه کنید:

همانطور که می بینید در اینجا دو انتخاب گر ID و Class را با هم ترکیب شده اند. در واقع انتخاب گر بالا اعلام می کند که هر عنصر class که با کاراکتر box درون عنصری با ID شامل کاراکتر container قرار گرفته است با استایل داده شده تعریف خواهد شد.

Attribute Selector

این نوع از انتخاب گر ها عناصر را بر اساس حضور و ارزش ویژگی ها یا اتربیوت ها تعیین می کنند و با استفاده از جعبه براکت یا […..] اعمال می شود. برای آشنایی با نحوه استفاده از این انتخاب گر css  به مثال زیر توجه کنید:

دقت کنید که نباید فاصله ای بین براکت و کاراکتر های درون آن باشد. با اعمال این دستور تمام اتربیوت های input type=”text” با استایل داده شده تعریف خواهند شد. این انتخاب گر css  نیز یکی از مهمترین و پرکاربرد ترین انتخاب گر ها است و استفاده درست و به جا از آن می تواند سرعت شما در طراحی صفحات وب را تا حد زیادی افزایش دهد.

Pseudo-element

آخرین Css selector که قصد معرفی آن را داریم Pseudo-element است. به این انتخاب گر ها شبه عنصری گفته می شود. اگر به طور مناسبی از این انتخاب گر css  استفاده شود به نظر من می تواند بسیار مفید باشد. اما تفاوت ها ای بین این انتخاب گر css و سایر انتخاب گر های معرفی شده وجود دارد. برای مثال شبه عنصر را در context یا زمینه به شکل زیر اعمال کرده ایم:

در اینجا شبه عنصر :before همانطور که از نامش پیداست یک عنصر خیالی را به درون یک عنصر واقعی و محتویات آن اضافه می کند. کار با این شبه عناصر نیاز به تجربه زیادی دارد و بسیاری از افراد نیازی به استفاده از آن ها حس نمی کنند. اما همانطور که گفته شد در صورت استفاده درست، شبه عناصر می توانند به افزایش سرعت شما در تغییر استایل ها کمک کنند.

 

منبع : طراحی سایت