آموزش CSS – سلکتور CSS

سلکتور CSS الگویی برای انطباق یا المان های موجود در سند HTML است.  قواعد و قوانین استایل مرتبط  به المان هایی اعمال می شود که با الگوی انتخابگر منطبق هستند.

انتخابگر ( Selector ) چیست؟

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

انتخابگرهای Universal:

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

اگر سایر شرایط در المان هدف وجود داشته باشد ممکن است این انتخابگر حذف گردد.  از این انتخابگر اغلب برای حذف حاشیه های پیش فرض یا padding  از المان موجود مورد استفاده قرار می گیرد.

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

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

انتخابگر نوع المان (Element Type Selector):

انتخابگر نوع المان هر  نمونه ای از المان را در درخت سند با نام نوع المان مربوطه منطق می سازد:

قواعد سبک دهی در داخل انتخابگر p بر روی هر المان <p>  در سند اعمال می شود و رنگ آن را صرف نظر از موقعیتی که در درخت سند دارد به آبی تغییر می دهد.

انتخابگر Id:

انتخابگر Id برای تعریف  قواعد سبک دهی برای المان واحد یا منحصر به فرد مورد استفاده قرار می گیرد. انتخابگر Id با علامت (#) نشان داده می شود و بلافاصله بعد از مقدار Id بیان می گردد.

این قانون سبک دهی متن المان را به رنگ قرمز در می آورد.

انتخابگر  کلاس:

انتخابگر کلاس را می توان برای انتخاب هر المان HTML ای مورد استفاده قرار داد که خصیصه کلاس(Class)  را دارد.

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

قانون سبک دهی که در مثال بالا به آن اشاره شد، متن هر المانی که در سند خصیصه کلاس آبی را داشته باشد به رنگ آبی در می آورد. شما می توانید کمی این کد را تغییر دهید.

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

قانون سبک دهی در داخل انتخابگر p متن را تنها برای المان هایی به رنگ آبی تغیر می دهد که خصیصه کلاس آن ها بر روی آبی تنظیم شده باشد. این انتخابگر بر روی سایر پاراگراف ها تاثیری نخواهد داشت.

انتخابگر Descendant:

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

مثلا اگر می خواهید تنها آن انکرهایی را انتخاب کنید که در یک لیست نامنظم قرار دارند می توانید از این انتخابگر بهره ببرید.

قواعد سبک دهی در داخل انتخابگر ul.menu li تنها بر روی <a>  اعمال می شود. به عنوان مثال المان انکری که در داخل لیست نامنظمی قرار گرفته و کلاس .menu را دارد.

به طور مشابه، قواعد سبک دهی در داخل انتخابگر h1 em  تنها بر روی المان <em>   اعمال می شود که در داخل هدینگ h1 قرار گرفته است.

انتخابگر فرزند(Child):

از انتخابگر فرزند تنها می توان برای انتخاب آن المان هایی استفاده کرد که فرزند مستقیم برخی  از المان هاست.انتخابگر فرزند از دو یا چند انتخابگر تشکیل شده که توسط نماد بزرگتر(> ) از هم جدا می شوند.

شما می توانید از این انتخابگرها برای انتخاب سطح اولِ المان لیست در داخل لیست مرتبی که بیش از یک سطح دارد استفاده کنید.

قواعد سبک دهی در داخل انتخابگر ul > li  تنها بر روی المان های <li>  اعمال می شود که  به طور مستقیم حاصل( فرزند) المان <ul>  هستند.

انتخابگر هم نوع مجاور(Adjacent Sibling Selectors):

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

E1 + E2 که در آن E2 هدف اصلی انتخابگر است.

انتخابگر h1 + p  در مثال پایین المان <p> را تنها زمانی انتخاب خواهد کرد که هر دوی المان های <h1>   و <p>  والد یکسانی در درخت سند داشته باشند و <h1>  بلافاصله قبل از المان <p>  بیاید.

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

انتخابگر General Sibling:

این نوع انتخابگر مشابه انتخابگر هم نوع مجاور است اما سختی و شدت کمتری دارد. انتخابگر general sibling از دو انتخابگر ساده تشکیل شده و توسط کاراکتر (∼) از هم جدا می شود.

می توان آن را همانند E1 ∼ E2 نوشت که در آن E2 هدف اصلی انتخابگر است.  انتخابگر h1 ∼ p  در مثال پایین تنها المان <p>  را انتخاب خواهد کرد که همه المان ها والد یکسانی در سند داشته باشند.

انتخابگر گروه بندی:

اغلب انتخابگرهای متعدد در یک style sheet  اعلان های قواعد سبک دهی یکسانی را به اشتراک می گذارند. شما می توانید آن ها را در یک گروه قرار دهید و کدهای موجود در برنامه را به حداقل برسانید.

اینکار از تکرار قواعد سبک دهی یکسان جلوگیری می کند.

همانطور که در مثال بالا مشاهده کردید، قاعده سبک دهی یکسان font-weight: normal توسط انتخابگرهای h1, h2 و h3 به اشتراک گذاشته شده است.

بنابراین شما می توانید آن ها را در لیستی همانند لیست زیر گروه بندی کنید و آن ها را به کمک علامت کاما از هم جدا سازید.

بخش طولانی و تقریبا سختی بود که نیاز است چندین بار این سلکتورها استفاده کنید تا کاربرد هر کدام را بهتر درک کنید

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.