SELECTOR های کاربردی در CSS

بهمن ۱۷, ۱۳۹۱ توسط : سعید

ممکنه تا الان شما در CSS  فقط با سلکتورهای ID  و CLASS آشنا باشید یا شاید فکر کنید که همین دو نوع سلکتور ( یا به فارسی انتخابگر! ) در سی اس اس موجود باشه.اما در ادامه این مطلب با سلکتورهایی آشنا میشیم که میتونه انعطاف پذیری بیشتری در هنگام کار با سی اس اس به ما بده.

۱- *

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

* {
 margin: 0;
 padding: 0;
}

از این سلکتور میتونید در بقیه سلکتورها هم استفاده کنید :

#container * {
 border: 1px solid black;
}

کد بالا تمام عناصر زیرمجموعه #container رو هدف قرار میده و حاشیه بهشون میده.

سازگاری با مرورگرهای   :

IE6+
Firefox
Chrome
Safari
Opera

۲ – #X

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

#container {
   width: 960px;
   margin: auto;
}

سازگاری با مرورگرهای :

IE6+
Firefox
Chrome
Safari
Opera

۳ – .X

علامت نقطه یا dot ( . ) برای انتخاب عناصر به وسیله خاصیت class استفاده میشه.از این سلکتور معمولا برای استایل دهی به گروهی از عناصر استفاده میشه اما از سلکتور id برای استایل دهی به یک عنصر خاص استفاده میشه.

.error {
  color: red;
}

سازگاری با مرورگرهای :

IE6+

Firefox

Chrome

Safari

Opera

۴ – X Y

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

a {
 text-decoration: none;
 }

همچنین میتونید تگهای زیر مجموعه یک تگ دیگه رو هم انتخاب کنید :

li a {
 text-decoration: none;
 }

با کد بالا تمام تگهای a که داخل تگ li قرار دارن انتخاب میشن.

سازگاری با مرورگرهای :

IE6+
Firefox
Chrome
Safari
Opera

۵ – X:visited و X:link

سلکتور :link که بهش کلاس کاذب یا pseudo-class هم میگن لینکهایی رو هدف قرار میده که هنوز روشون کلیک نشده باشه.

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

a:link { color: red; }
 a:visted { color: purple; }

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۶ – X + Y

ul + p {
 color: red;
 }

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

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۷ – X > Y

تفاوت اصلی بین سلکتور X Y ( شماره ۴ ) و این سلکتور اینه که این سلکتور فقط زیرمجموعه ها رو انتخاب میکنه.به مثلا زیر دقت کنید :

<div id="container">
 <ul>
 <li> List Item
 <ul>
 <li> Child </li>
 </ul>
 </li>
 <li> List Item </li>
 <li> List Item </li>
 <li> List Item </li>
 </ul>
 </div>

حالا کد سی اس اس زیر :

div#container > ul {
 border: 1px solid black;
 }

فقط تگهای ul زیر مجموعه #container رو انتخاب میکنه و تگ ul که زیر مجموعه اولین تگ li رو انتخاب نمیکنه.

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۸ – X ~ Y

ul ~ p {
 color: red;
 }

این سلکتور خیلی شبیه به سلکتور X + Y عمل میکنه با این تفاوت که سلکتور X + Y فقط اولین عنصر بعد از عنصر X رو هدف قرار میده اما این سلکتور تمام تگهای p بعد از ul رو انتخاب میکنه.

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۹ – X[title]

a[title] {
 color: green;
 }

در مثال بالا تگهای a انتخاب میشن که خاصیت title براشون تعریف شده باشه و تگهای a که خاصیت title نداشته باشن انتخاب نمیشن.

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۱۰ – X[href=”foo”]

a[href="http://phpro.ir"] {
 color: #1f6053; /* phpro.ir green */
 }

کاربرد این سلکتور اینه که تگهای a که خاصیت href اونا برابر با مقدار خاصی باشه هدف قرارداده میشه.در مثال بالا لینکهایی که به سایت phpro.ir لینک شده باشن رنگشون قرمز میشه و روی بقیه لینکها تاثیری نداره.

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

a[target="_blank"]{
background:url(icon.png);
}

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۱۱ – X[href*=”foo”]

a[href*="php"] {
 color: #1f6053; /* php green */
 }

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

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۱۲ – X[href^=”http”]

این سلکتور هم مثل سلکتور قبلیه اما با این تفاوت که اگر کلمه مورد نظرمون در ابتدای خاصیت href مثلا http  بود انتخاب میشه.

a[href^="http"] {
 background: url(path/to/external/icon.png) no-repeat;
 padding-left: 10px;
 }

مثال بالا لینکهایی رو هدف قرار میده که از پروتکل http استفاده میکنن.یا میتونید لینکهایی که از پروتکل https استفاده میکنن رو هم با این روش انتخاب کنید.دقت کنید که استفاده از http:// لزومی نداره فقط همون http یا https کافیه.

سازگاری با مرورگرهای :

IE7+
Firefox
Chrome
Safari
Opera

۱۳ – X[href$=”.jpg”]

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

a[href$=".jpg"] {
 color: red;
 }

این کد لینکهایی که به عکسهایی با پسوند jpg لینک شدن رو قرمز میکنه!.

سازگاری با مرورگرهای :

IE7+

Firefox

Chrome

Safari

Opera

۱۴ – X[data-*=”foo”]

در سلکتور شماره ۱۳ که اگر بخوایم عکسهایی با پسوندهای jpg , gif , png , jpegرو انتخاب کنیم باید به صورت زیر عمل کنیم:

 a[href$=".jpg"],
 a[href$=".jpeg"],
 a[href$=".png"],
 a[href$=".gif"] {
 color: red;
 }

استفاده از روش بالا یک مقدار سخته.یه راه دیگه برای انجام اینکار اینه که یک خاصیت جدید به تگها اضافه کنیم و با استفاده از این خاصیت بتونیم با سی اس اس بهش دسترسی داشته باشیم.حالا اگر ما لینکهایی بسازیم و یک خاصیت data-filetype بهش اضافه کنیم و مقدارش رو image قرار بدیم :

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

حالا به راحتی میتونیم با سی اس اس بهش دسترسی داشته باشیم :

a[data-filetype="image"] {
 color: red;
 }

سازگاری با مرورگرهای :

IE7+

Firefox

Chrome

Safari

Opera

۱۵ – X[foo~=”bar”]

با استفاده از این روش میتونید دوستاتون رو تحت تاثیر قرار بدین چون افرادی که از این سلکتور اطلاع دارن زیاد نیستن.علامت tilda یا ~ خاصیت هایی رو هدف قرار میده که بینشون فاصله خالی باشه.مثلا در مثال شماره ۱۴ میتونیم یک خاصیت با نام data-info ایجاد کنیم به صورت زیر :

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

با اینکار میتونیم تگهایی که یکی یا هر دو مقدار external یا image در خاصیت data-info قرار داشته باشه رو به صورت زیر هدف قرار بدیم :

/* Target data-info attr that contains the value "external" */
 a[data-info~="external"] {
 color: red;
 }
 /* And which contain the value "image" */
 a[data-info~="image"] {
 border: 1px solid black;
 }

باحال بود مگه نه؟

سازگاری با مرورگرهای :

۱۶ – X:checked

این هم یک کلاس کاذب یا pseudo-class برای عناصری استفاده میشه که میتونن check بشن.مثل چک باکس یا رادیو باتن.

سازگاری با مرورگرهای :

IE9+

Firefox

Chrome

Safari

Opera

۱۷ – X:after  و  X:before

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

سازگاری با مرورگرهای :

۱۸ – X:hover

این یکی هم که دیگه نیاز به توضیح نداره.وقتی کاربر با موس روی یک عنصر میره این استایل بهش داده میشه.این سلکتور در اینترنت اکسپلورر ۶ فقط برای لینکها قرار میده .

سازگاری با مرورگرهای :

۱۹ – X:not(selector)

یک pseudo کلاس دیگه :

div:not(#container) {
 color: blue;
 }

این کد همه div هارو هدف قرار میده به غیر از div ی که خاصیت id اون برابر با container باشه.

یا برای انتخاب همه تگهای تکی به غیر از پارارافها از کد زیر استفاده میکنیم :

*:not(p) {
 color: green;
 }

سازگاری با مرورگرهای :

IE9+

Firefox

Chrome

Safari

Opera

۲۰ – X::pseudo-element

با استفاده از این سلکتور که با از تا دونقطه استفاده میکنه ( :: ) میتونید قسمتهایی از یک عنصر رو تغییر بدید مثل خط اول یا کلمه اول یک عنصر

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
 }

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

برای انتخاب و تغییر استایل خط اول یک عنصر هم میتونید از روش زیر استفاده کنید :

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
 }

سازگار با مرورگرهای :

IE6+

Firefox

Chrome

Safari

Opera

۲۱ – X:nth-child(n)

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

li:nth-child(3) {
 color: red;
 }

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

سازگاری با مرورگرهای :

IE9+

Firefox 3.5+

Chrome

Safari

۲۲ – X:nth-last-child(n)

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

li:nth-last-child(3) {
 color: red;
 }

سازگاری با مرورگرهای :

IE9+

Firefox 3.5+

Chrome

Safari

۲۳- X:nth-of-type(n)

فرض کنید که چند تا تگ ul دارید و میخواید سومین ul  حاشیه داشته باشه.برای اینکار به صورت زیر عمل میکنیم :

ul:nth-of-type(3) {
 border: 1px solid black;
 }

سازگاری با مرورگرهای :

IE9+

Firefox 3.5+

Chrome

Safari

۲۴ – nth-last-of-type(n)

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

ul:nth-last-of-type(3) {
 border: 1px solid black;
 }

سازگاری با مرورگرهای :

IE9+

Firefox 3.5+

Chrome

Safari

Opera

۲۵ – X:first-child

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

ul li:first-child {
 border-top: none;
 }

سازگاری با مرورگرهای :

IE7+

Firefox

Chrome

Safari

Opera

۲۶ – X:last-child

این هم مثل قبلیه که آخرین فرزند از عنصر X رو هدف قرار میده.

ul > li:last-child {
 color: green;
 }

سازگاری با مرورگرهای :

IE9+

Firefox

Chrome

Safari

Opera

ie 8 از fist-child پشتیبانی میکنه اما از last-child پشتیبانی نمیکنه

جمع بندی :

در منبع اصلی که این سلکتورهارو معرفی کرده بود به چندتا دیگه هم اشاره کرده بود که زیاد کاربردی نبود برای همین معرفی نکردم.اما مطلبی رو که باید مد نظر داشته باشید اینه که تعداد زیادی از این سلکتورها در اینترنت اکسپلورر ۶ جواب نمیدن پس مواظب باشید.

موفق باشید

منبع : http://net.tutsplus.com

 

[ratings]

بازدید : ۷۰۸۲

بهمن ۱۸, ۱۳۹۱ @ ۸:۰۲ ق.ظ

سلام
در اینکه مطلب خوبی بود شکی نیست، مرسی.
ی پیشنهاد هم دارم! اینکه برای پست‌ها امکان رتبه دادن اضافه کنید، تا بشه مطالب با رتبه بالای سایت رو براحتی تشخیص داد! و البته کامنت گذاشتن زیر این نوع پست‌ها زیاد حال نمی‌ده! 😉

پاسخ دادن
    سعید
    بهمن ۱۸, ۱۳۹۱ @ ۴:۴۲ ب.ظ

    ممنون نظر خوبیه.
    زیر کدوم پستها حال نمیده کامنت گذاشت؟

    پاسخ دادن
    سعید
    بهمن ۱۸, ۱۳۹۱ @ ۵:۱۱ ب.ظ

    امکان رای دادن به پستها رو هم اضافه کردم.از منوی راست هم میتونی به پستهایی که بیشترین رای رو گرفتن دسترسی داشته باشی

    پاسخ دادن
      بهمن ۱۸, ۱۳۹۱ @ ۱۱:۰۷ ب.ظ

      مرسی بابت توجه! از این نظر گفتم کامنت گذاشتن حال نمی‌ده! چون به نظرم جالب نیست من کامنت بزارم بگم wow! fantastic و این حرفا… ولی بجاش رتبه دادن به این قسم نوشته‌ها بکار باقی رفقا هم میاد و کار آدم هم راحت می‌شه.
      موفق باشی سعید جان.

      پاسخ دادن
        سعید
        بهمن ۱۸, ۱۳۹۱ @ ۱۱:۵۷ ب.ظ

        حرفت درسته مهدی جان ولی مثلا اگر پستی بد بود بیاین بگین چرا این پست بده و دلیل امتیاز پایینش رو هم بگین تا اشتباهاتم رو رفع کنم خیلی بهتره.

        پاسخ دادن
        اسفند ۱, ۱۳۹۱ @ ۸:۵۷ ب.ظ

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

        پاسخ دادن
          اسفند ۱, ۱۳۹۱ @ ۸:۵۹ ب.ظ

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

          سعید
          اسفند ۲, ۱۳۹۱ @ ۱۰:۲۶ ق.ظ

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

          سعید
          اسفند ۲, ۱۳۹۱ @ ۱۰:۲۷ ق.ظ

          خواهش میکنم بهروز جان وظیفه است.
          موفق باشی

بهمن ۱۹, ۱۳۹۱ @ ۶:۲۹ ب.ظ

ایول!!!!!!!!!
ممنون خیلی جالب بودن برام!
بعضی جاها خیلی به کار میان 🙂

پاسخ دادن
ناشناس
اسفند ۵, ۱۳۹۱ @ ۲:۲۰ ب.ظ

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

پاسخ دادن
    سعید
    اسفند ۵, ۱۳۹۱ @ ۴:۳۸ ب.ظ

    ممنون
    فکر میکنم صفحه به طور کامل برای شما لود نشده چون کدها به صورت هایلایت شده نمایش داده میشن و چپ به راست هستن
    موفق باشید

    پاسخ دادن
      ناشناس
      اسفند ۶, ۱۳۹۱ @ ۴:۰۱ ب.ظ

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

      پاسخ دادن
ناشناس
اسفند ۲۹, ۱۳۹۱ @ ۳:۳۸ ب.ظ

سلام یه سوال دارم تفاوت این دو تا کد CSS چیه؟

ul.menu{

}

با

.menu ul{

}

پاسخ دادن
    Hossein
    فروردین ۵, ۱۳۹۲ @ ۴:۱۷ ب.ظ

    اولی تگ ul که خودش کلاس menu رو هم داشته باشه انتخاب می‌کنه ولی دومی تگ ul که داخل یک تگ با کلاس menu باشه رو انتخاب می‌کنه.

    پاسخ دادن
محمد
اسفند ۲۸, ۱۳۹۳ @ ۱۲:۱۴ ب.ظ

عالی بود
فقط بعضی جاهاش رو کامل توضیح ندادی
مثل ul p که متوجه نشدم دلیل به کار بردنش برای چیه!

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*