نحوی انتخاب عناصر یا Selector ها در CSS

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

CSS چیست ؟

به زبان ساده ما به کمک css عناصر موجود در HTML را شناسایی و به آن ها استایل می دهیم در واقع وب سایت خود را از حالت اسکلتی خام به ساختمانی با ظاهری زیبا تبدیل می کنیم.

راه های افزودن css به html چیست ؟

ما با استفاده از این سه روش می توانیم این کار را انجام دهیم

External

این روش که متداول ترین روش کار با css است ، با ایجاد یک فایل با پسوند css. شما کد های خود را درون آن قرار داده و به وسیله ی تگ link در قسمت head کد های html خود را وارد برنامه می کنید.

Internal

Internal یا داخلی ، شما می توانید کد های css خود را در قسمت head و در تگ style وارد کنید .

Inline

در این روش که به صورت مستقیم روی یک تگ تغییرات اعمال می شود شما می توانید برای مثال روی یک تگ div در کل سند تغییر ایجاد کنید.

Selector چیست ؟

انتخاب یک تگ یا مجموعه ی از تگ ها برای اعمال تغییرات به وسیله ی css بر روی یک متن، تصویر و... را انتخاب کننده یا Selector می گویند.

Selector ها به چند قسمت تقسیم می شوند ؟

به سه قسمت :

1 – انتخاب نام خود عنصر

شما می توانید یک تگ را انتخاب کرده و بر روی آن تغییرات را ایجاد کنید برای مثال تگ h2 یا div را انتخاب کرده و برروی آن تغییرات را ایجاد می کنید.

2- انتخاب به وسیله ی id

با مشخص کردن id برای تگ های مورد نظر در html شما می توایند به وسیله ی همین id تغیرات را در css با علامت # اعمال کنید.

3- انتخاب به وسیله ی Class

مانند مورد قبل (id) شما می توانید با تعریف کردن کلاس مورد نظر بر روی تگ ها در html به وسیله ی دات . در css تغییرات را اعمال کنید.

Declaration در css چیست ؟

پس از معین کردن نام عنصر ، نام کلاس ویا id مورد نظر با استفاده از {…} که از دو قسمت خصوصیت و مقدار تشکیل شده می توانیم استایل مورد نظر خود را به html وارد کنیم .

برای مثال h1{color :red}

در ادامه به بیان توضیحات و مثال های بیشتر می پردازیم.

انواع روش صدا زدن عناصر در css

1- انتخاب نام خود عنصر

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

   <h2 id="top_menu" class="top_menu_h2">
      topdemy
    </h2>

     h2 {  }
    #top_menu {  }
    .top_menu_h2 {  }

در مثال بالا از هر سه روش استفاده کرده ایم.

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

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

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

مثال زیر را در نظر بگیرید

<h4 class="app" id="top_menu1"></h4>
<div class="app" id="top_menu2"></div>
<h3 class="app" id="top_menu3"></h3>

  h3.app {  }
  .app#top_menu3 {  }
  h3#top_menu3 {  }

در این مثال ما قصد داریم عنصرh3 را استایل دهی کنیم همانطور که مشاهده می کنید از سه روش استفاده کرده ایم

در روش اول از نام خود تگ h3 و نام کلاس آن استفاده کردایم در روش دوم از نام کلاس و نام ایدی آن استفاده کردایم و در روش سوم از نام تگ h3 و نام ایدی آن استفاده کردایم که در نتیجه نهایی هیچ تفاوتی ایجاد نمیکند.

شما می توانید عناصری که یک استایل دارند به صورت کلی استایل دهید

برای مثال :

  p {  }
  h3 {  }

  p, h3  {  }

مثال زیر را در نظر بگیرید

  <div>
    <h2 class="h1_1"></h2>

    <ul>
        <li>
            <p class="h2_2"></p>
        </li>
    </ul>
</div>

<h3 class="h3_3"></h3>

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

  div p { color: yellow; }
div > p { color: red; }
div + p { color: red; } 

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

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

و برای دسترسی به تگ p خارج از div از علامت + اضافه می کنیم.

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

<h3 id="header1" class="h3_head" rel="top_h3">topdemy</h3>
  <h3 id="header1" class="h3_head" rel="top_h3">topdemy</h3>

در تکه کد بالا قسمت rel که یک صفت یا ویژگی است اضافه شده و ما قصد داریم با استفاده از همین ویژگی به عناصر خود استایل دهیم برای این کار روش های زیادی وجود دارد

برای مثال شما می توانید به روش زیر عمل کنید

  h3[rel] {  }

در این روش شما به تمامی h3 هایی که صفت rel را دارند دسترسی پیدا می کنید.

می توانید نام صفت را نیز ذکر کنید مانند مثال زیر

  h3[rel = "top_h3"] {  }

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

  h3:not([rel])

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

برای این کار باید مانند مثال زیر عمل کنیم

ابتدا نام ایدی ، نام کلاس و... را می آوریم و در مرحله بعد نام فعالیتی که می خواهیم روی آن انجام دهیم را می آوریم در اینجا من مثالی از hover می آورم که بسیار پر کاربرد است .

 P:hover a { }

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

امیدوارم سلامت و موفق باشید.