شما اینجا هستید

انتخابگرها برای انتخاب و دستکاری کردن عناصر HTML بکار میروند.

انتخابگرها به ما این امکان را میدهند که بر اساس شناسه (id), کلاس, نوع, خصوصیت و چیزهای دیگر عناصر HTML را پیدا یا (انتخاب) کنیم.

سلکتور عنصر

سلکتور عنصر, عناصر را براساس نام عنصر انتخاب میکند. شما میتوانید همه عناصر <p> را مانند مثال زیر انتخاب کنید:

<html>

<head>

<style>

p {

text-align: center;

color: red;

}

</style>

</head>

<body>



<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>



</body>

</html>

 

سلکتور id

 

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

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

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

در مثال زیر برای عنصر با "id="para1 کد css مینویسیم:

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

}

</style>

</head>

<body>



<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>



</body>

</html>

 

نام شناسه را با عدد شروع نکنید!

 

سلکتور کلاس

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

در مثال زیر همه عناصر HTML با "class="center وسط چین میشوند:

<html>

<head>

<style>

.center {

text-align: center;

color: red;

}

</style>

</head>

<body>



<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>



</body>

</html>

 

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

در مثال زیر همه عناصر <p> با کلاس center وسط چین میشوند و بقیه عناصر با همین کلاس تغییری نمیکنند.

<html>

<head>

<style>

p.center {

text-align: center;

color: red;

}

</style>

</head>

<body>



<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>



</body>

</html>

 

نام کلاس را با عدد شروع نکنید!

 

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

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

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

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

درمثال زیر ما کد بالا را به صورت سلکتورهای هم گروه شده درآوردیم:

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

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.