CSS Selectors

<< مبحث قبلی مبحث بعدی >>
دقت داشته باشید که در تمامی مثال‌ها فایل CSS با نام example.css در همان محل فایل HTML ذخیره شده و از طریق برچسب <link> داخل فایل HTML فراخوانی می‌شود.

انتخاب کننده‌های CSS

انتخاب کننده‌های CSS جهت پیدا کردن (یا انتخاب) عناصر HTML که می‌خواهیم استایل آن‌ها را تعیین کنیم به کار می‌روند.

می‌توان انتخاب کننده‌های CSS را به 5 دسته تقسیم کرد:

  • انتخاب کننده‌های ساده: عناصر را بر اساس اسم، آیدی، کلاس انتخاب می‌کنند.
  • انتخاب کننده‌های ترکیبی: عناصر را بر اساس ارتباط خاصی که بین آن‌ها است انتخاب می‌کنند.
  • انتخاب کننده‌های شبه کلاس: عناصر را بر اساس یک حالت خاص (certain state) انتخاب می‌کنند.
  • انتخاب کننده‌های شبه عنصر: قسمتی از یک عنصر را انتخاب می‌کنند.
  • انتخاب کننده‌های ویژگی‌ها: عناصر را بر اساس ویژگی یا مقدار ویژگی آن‌ها انتخاب می‌کنند.

در این صفحه ساده‌ترین انتخاب کننده‌های CSS توضیح داده خواهد شد.

انتخاب کننده‌های نوع (type selectors)

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

فایل HTML:


<!DOCTYPE HTML>
<html>
  <head>
    <link rel = "stylesheet" href = "example.css" >
  </head>
  <body>
      <p> This is a paragraph. </p>
      <p> This is another paragraph. </p>
  </body>
</html>

فایل CSS:


p {
    color: white;
    background-color: gray;
}

خروجی:

انتخاب کننده‌های id

انتخاب کننده‌های id به شما این امکان را می‌دهند که عناصر HTML درای ویژگی id را فارغ از مکان آن در سند به سبک دلخواه خود درآورید. برای درک چگونگی کارکرد آن به مثال زیر دقت کنید.

فایل HTML:


<!DOCTYPE HTML>
<html>
  <head>
    <link rel = "stylesheet" href = "example.css" >
  </head>
  <body>
    <div id = "intro">
      <p> This paragraph is in the intro section.</p>
    </div>
      <p> This paragraph is not in the intro section. </p>
  </body>
</html>

فایل CSS:

برای انتخاب یک عنصر با یک id مشخص، ابتدا از یک علامت "هش" (#) استفاده کنید و به دنبال آن id عنصر را بنویسید.


#intro {
    color: white;
    background-color: gray;
}

خروجی:

انتخاب کننده‌های class

انتخاب کننده‌های class به مانند انتخاب کننده‌های id کار می‌کنند. تفاوت اساسی آن‌ها در این است که از id در هر صفحه یک بار می‌توان استفاده کرد در حالیکه class را هر چند بار که مورد نیاز باشد می‌توان در یک صفحه به کار برد.

فایل HTML:


<!DOCTYPE HTML>
<html>
  <head>
    <link rel = "stylesheet" href = "example.css" >
  </head>
  <body>
    <div class = "first" >
      <p> This is a paragraph. </p>
    </div>
      <p> This is another paragraph. </p>
      <p class = "first"> This is the third paragraph. </p>
  </body>
</html>

فایل CSS:

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


.first {
    color: white;
    background-color: gray;
}

خروجی:

انتخاب کننده‌های وارث (descendant selectors)

این انتخاب کننده‌ها برای انتخاب عناصری که وارث (فرزند) عنصری دیگر هستند به کار می‌روند. به عنوان مثال اگر بخواهید داخل پاراگراف‌ها به برچسب <em> سبک خاصی بدهید، می‌توانید به صورت زیر عمل کنید.

فایل HTML:


<!DOCTYPE HTML>
<html>
  <head>
    <link rel = "stylesheet" href = "example.css" >
  </head>
  <body>
      <p> This is a <em> paragraph</em>. </p>
  </body>
</html>

فایل CSS:

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


p em{
    color: red;
    background-color: yellow;
}

خروجی:

انتخاب کننده سراسری

این انتخاب کننده تمامی عناصر HTML داخل صفحه وب را انتخاب می‌کند.

فایل HTML:


<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "example.css" >
    </head>
    <body>

        <h1>Hello world!</h1>

        <p>Every element on the page will be affected by the style.</p>
        <p id="para1">Me too!</p>
        <p>And me!</p>

    </body>
</html>

فایل CSS:


* {
    text-align: center;
    color: blue;
}

خروجی:

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

هرگاه چند عنصر HTML همگی دارای یک استایل باشند، می‌توان آن‌ها را به صورت گروهی به شکل زیر نوشت.

فایل HTML:


<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "example.css">
    </head>
    <body>
        <h1>Hello World!</h1>
        <h2>Smaller heading!</h2>
        <p>This is a paragraph.</p>
    </body>
</html>

فایل CSS:


h1, h2, p {
    text-align: center;
    color: red;
}

خروجی:

<< مبحث قبلی مبحث بعدی >>