سلکتور چیست؟
سلکتور فرمان یا انتخاب کننده جزئی از می‌باشد. همانطور که از نامش پیداست وظیفه انتخاب را دارد. زمانی که شما بخواهید به یک بخشی از HTML تغییراتی اعمال کنید ابتدا باید آن بخش را صدا بزنید و سپس تغییرات خود را با نوشتن کدهای CSS اعمال کنید.
انواع سلکتورها
در پست قبلی درمورد صحبت کردیم و با مفهوم آیدی و کلاس آشنا شدیم. این دو سلکتور بسیار رایج هستند اما بهتر است یک بار دیگر و از ابتدا درمورد انواع سلکتورها صحبت کنیم. به طور کلی سلکتورها به دو بخش سلکتورهای ساده و پیشرفته تقسیم شده اند که سلکتورهای ساده بیشترین استفاده را در بین طراحان وب دارد. همچنین خود سلکتورهای پیشرفته به چهار دسته تقسیم شده اند. ما در این پست با تمامی سلکتورهای موجود در CSS آشنا خواهیم شد و به طور کامل درباره‌اشان توضیح خواهیم داد.
سلکتور قدرت
سلکتور قدرت که سلکتور سراسری نیز نامیده می‌شود می‌تواند تمامی عنصرهای موجود در یک صفحه وب را انتخاب کند. این سلکتور حتی زیرشاخه های دیگر عناصر را نیز انتخاب می‌کند. برای انتخاب تمامی عناصر موجود در یک صفحه وب به صورت زیر عمل میکنیم :
* {
css declarations;
}
سلکتور آیدی یا ID
برای استفاده از این نوع سلکتور ابتدا باید در HTML برای عنصر مورد نظر خود آیدی تعریف کنید و سپس در CSS آن را انتخاب کنید. همانطور که می‌دانید آیدی باید یکتا باشد و تنها برای یک آیدی خاص می‌توانید استایل تعریف کنید. هرچند می‌توانید چندین آیدی را به صورت ترکیبی انتخاب کنید و اختلالی نیز رخ نخواهد داد اما از لحاظ استاندارد کدنویسی معتبر نمی‌باشد. سینتکس این سلکتور به شکل زیر می‌باشد :
#id {
css declarations;
}
برای مثال اگر بخواهیم برای یک عنصر که دارای آیدی first می‌باشد استایل دهی کنیم به صورت زیر عمل میکنیم :
#first {
background-color: yellow;
}
سلکتور کلاس یا Class
این سلکتور نیز همانند آیدی یک نوع سلکتور خاص است که می‌توان کلاس‌های مختلف را که از قبل در HTML تعریف شده است در CSS انتخاب کرد. سلکتور کلاس برخلاف آیدی می‌تواند یکتا نباشد و برای چندین عنصر امکان تعریف یک کلاس مشترک وجود دارد. سینتکس این سلکتور به شکل زیر می‌باشد :
.class {
css declarations;
}
برای مثال اگر بخواهیم تگ هایی که دارای کلاس demo می‌باشند را انتخاب کنیم به صورت زیر عمل میکنیم :
.demo {
color: blue;
}
}
سلکتور تگ یا Element
این سلکتور تگ و یا عنصر دلخواه را انتخاب می‌کند. این نوع از سلکتورها نیز از رایج ترین سلکتورها هستند و طراحان وب از آن بیشتر استفاده می‌کنند. این نوع سلکتور زمانی مورد استفاده قرار می‌گیرد که بخواهید تمامی یک نوع از عنصر را انتخاب کنید. از طرفی در این نوع سلکتور شما نمی‌توانید انتخاب کنید کدام یک از عنصر ها به تنهایی انتخاب شوند. به طوری که تنها با استایل دهی بر روی یک عنصر، بر روی تمامی عنصرهای مشابه دیگر نیز اعمال خواهد شد. سینتکس این سلکتور به شکل زیر می‌باشد :
element {
css declarations;
}
برای مثال اگر بخواهیم تمامی
های موجود در HTML را انتخاب کنیم به صورت زیر عمل میکنیم :
p {
background-color: yellow;
}
سلکتورهای پیشرفته
اگر تا به اینجا سلکتورها را خوب یاد گرفتید، تبریک میگم! چون یادگیری این سلکتورها برای هر طراح وبی ضروری می‌باشد. اما توجه داشته باشید که در CSS سلکتورهای پیشرفته‌تری نیز وجود دارند که یادگیری آنها خالی از لطف نیست. سلکتورهای پیشرفته در CSS به چهار دسته تقسیم می‌شوند :
- سلکتورهای Combinator
- سلکتورهای Attribute
- سلکتورهای Pseudo-class
- سلکتورهای Pseudo-elements
در ادامه پست سلکتورها در CSS با ما همراه شوید تا با این سلکتورهای پیشرفته همراه با مثال آشنا شویم.
سلکتورهای Combinator
در لغت Combinator به معنای ترکیب کننده می‌باشد. در این نوع از سلکتورها کلاس‌ها، آیدی و عنصرها را با هم ترکیب کرده و یک سلکتور متفاوت خلق میکنیم. سلکتورهای ترکیبی به پنج دسته تقسیم می‌شوند :
- سلکتورهای element, class
- سلکتورهای element element
- سلکتورهای element>element
- سلکتورهای element+element
- سلکتورهای element1~element2
در ادامه پست به توضیح و بررسی هر کدام از این سلکتورها همراه با ارائه یک نمونه مثال می‌پردازیم.
سلکتور ترکیبی یا …,element, class
همانطور که از نام این سلکتور پیداست، از این سلکتور زمانی استفاده می‌شود که بخواهیم به صورت ترکیبی و به چندین کلاس یا عنصر استایل دهی مشترک کنیم. استفاده از این نوع سلکتور موجب کمتر شدن تعداد کدها نیز می‌شود. زیرا دیگر نیاز نیست برای هر کدام از کلاس‌ها یا عنصرها به صورت جداگانه استایل بنویسیم. در این روش کلاس‌ها و عنصرها با کاراکتر کاما (,) از یکدیگر جدا می‌شوند. همچنین در این سلکتور هرچندتا که بخواهید می‌توانید کلاس و عنصر انتخاب کنید.
سینتکس این سلکتور به شکل زیر می‌باشد :
element, class {
css declarations;
}
برای مثال اگر بخواهیم برای
و
p, h1, .demo {
background-color: yellow;
}
سلکتور Descendant یا element element
این سلکتور که بیشتر به صورت پدر و فرزندی شناخته می‌شود تنها به عنصرهایی استایل می‌دهد که نواده عنصر انتخاب شده باشند. بدین صورت که تنها با یک فاصله (Space) رابطه پدر فرزندی را تعریف میکنیم. در این نوع سلکتور تمامی زیرشاخه های عنصر پدر بدون استثناء انتخاب می‌شوند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element element {
css declarations;
}
برای مثال اگر چندین سلکتور داشته باشیم اما تنها بخواهیم به آن را استایل دهی کنیم از این روش و به صورت زیر استفاده میکنیم :
کدهای HTML :
I’m third
CSS :
div p {
color: red;
}
در این مثال تنها به پاراگراف اول و دوم استایل اعمال خواهد شد.
سلکتور Child یا element>element
این سلکتور همانند سلکتور بالا عمل می‌کند اما تفاوتی که وجود دارد در این است که این سلکتور تنها بر روی عناصری که مستقیماً فرزند والد انتخاب شده هستند استایل دهی می‌کند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element > element {
css declarations;
}
برای مثال در تکه کد زیر استایل بر روی آن
که مستقیماً فرزند
نمی‌باشد اعمال نخواهد شد.
کدهای HTML :
My name is Fatemeh
I live in Iran
CSS :
div > p {
background-color: #b0f5b0;
}
سلکتور Adjacent Sibling یا element+element
در لغت Sibling به معنای خواهر یا برادر است؛ و از طرفی Adjacent به معنای مجاور می‌باشد. این نوع سلکتور تنها عنصرهای همجوار عنصر انتخاب شده را انتخاب کرده و استایل دهی می‌کند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element + element {
css declarations;
}
برای مثال اگر بخواهیم تنها
بعد از
کدهای HTML :
I will be styled
I will not be styled
CSS :
h1 + p {
background-color: pink;
}
سلکتور General Sibling یا element1~element2
این سلکتور نیز همانند سلکتور بالا عمل می‌کند با این تفاوت که دیگر فقط عنصر مجاور انتخاب نمی‌شود. بلکه تمامی عنصرهایی که پس از عنصر انتخاب شده وجود دارند را انتخاب کرده و استایل دهی می‌کند.
سینتکس این سلکتور به شکل زیر می‌باشد :
element ~ element {
css declarations;
}
برای مثال :
کدهای HTML :
I will not be styled
My color is red
My color is red
CSS :
p ~ h3 {
background: red;
}
سلکتور Attribute یا [attribute]
سلکتورها در CSS انواع مختلفی دارند که کاربردهای فراوانی دارند. یکی از این سلکتورها که به چندین صورت می‌توان از آن استفاده کرد سلکتور Attribute می‌باشد.
سینتکس این سلکتور به شکل زیر می‌باشد :
[attribute] {
css declarations;
}
این نوع سلکتورها بسیار پیشرفته و پرکاربرد می‌باشند و می‌توانیم بر اساس صفت عنصرها، آنها را استایل دهی کنیم. این نوع از استایل دهی به شش دسته تقسیم می‌شود :
- سلکتور [attribute=value]
- سلکتور [attribute~=value]
- سلکتور [attribute|=value]
- سلکتور [attribute^=value]
- سلکتور [attribute$=value]
- سلکتور [attribute*=value]
[attribute=value]
این نوع سلکتور زمانی به کار می‌آید که بخواهیم یک عنصر دارای یک صفت خاص را انتخاب کنیم. برای مثال، برای انتخاب تمامی لینک های موجود در صفحه وب که دارای صفت target باشند به صورت زیر عمل میکنیم :
a[target] {
color: brown;
}
حال اگر بخواهیم لینک هایی را که صفت target شان برابر با blank_ باشد انتخاب کنیم باید به صورت زیر عمل کنیم :
a[target=_blank] {
color: purple;
}
[attribute~=value]
از این سلکتور زمانی استفاده می‌شود که بخواهیم عنصری را که صفتش حاوی یک مقدار مشخص است انتخاب کنیم. توجه کنید که این مقدار مشخص باید به تنهایی و یا درکنار مقادیر دیگری که با فاصله از هم جدا شده‌اند وجود داشته باشد.
منبع : بابا ادیسون