آموزش برنامه نویسی وب و مهارتهای مرتبط

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

سلکتور آی دی (ID) و کلاس (Class) در CSS

در آموزش قبل اشاره شد که CSS به خودی خود کاربرد خاصی ندارد و در کنار تگ های HTML است که معنی و کاربرد پیدا می کند، در واقع CSS صرفا برای تعریف استایل تگ های مختلف HTML به وجود آمده است، اما CSS چگونه این تگ ها را در صفحات وب شناسایی می کند؟ به طور مثال اگر بخواهیم از بین دهها تگ div موجود در صفحه div مربوط به یک مطلب مشخص را استایل دهی کنیم، CSS چه راه حلی برای این موضوع در نظر گرفته است؟ پاسخ این نوع سوالات عبارت سلکتور (Selector) است، سلکتور راهکاری در CSS است که با آن عنصر هدف در HTML برای استایل دهی مشخص می شود، تعداد سلکتورها نسبتا زیاد است، در این آموزش به دو مورد از مهم ترین و پرکاربردترین ها یعنی آی دی (ID) و کلاس (Class) خواهیم پرداخت که درک و تسلط بر نحوه کاربرد آنها در روند فراگیری CSS اهمیت زیادی دارد، در کنار این دو سلکتور پر کاربرد گذری خواهیم داشت بر مبحث قانون اولویت بندی سلکتورها در CSS که درک آن نیز برای مراحل بعدی و آموزش های پیشرفته تر ضرورت دارد.

معنی سلکتور (Selector) در CSS

همان طور که گفتیم سلکتور (Selector) در واقع راهکاری در CSS است که با آن عنصر هدف در HTML برای استایل دهی مشخص می شود، سلکتورها الگوهای تعریف شده (Pattern) در CSS هستند که با آنها عنصر یا عناصری که می خواهیم استایل بر آنها تاثیر داشته باشد را انتخاب (Select) می کنیم لذا می توانیم در ترجمه تحت الفظی این عبارت به آن انتخابگر نیز بگوییم، برای مثال سلکتور p در CSS استایل را به تمام تگ های p موجود در کدنویسی HTML صفحه نسبت می دهد یا به عبارتی دیگر تمام تگ های p در صفحه را جهت اعمال استایل CSS مد نظر انتخاب می کند:

<style type="text/css">
p {
    font-size:16px;
    color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
<p>پاراگراف سوم</p>

در مثال بالا استایل CSS به تمام تگ های p نسبت داده می شود، اما اگر بخواهیم فقط یک تگ p خاص را انتخاب کنیم باید به یکی از روش های تعریف آی دی (ID) یا کلاس (Class) در CSS مانند نمونه کد زیر عمل کنیم:

<style type="text/css">
.color-text {
    font-size:16px;
    color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p class="color-text">پاراگراف دوم</p>
<p>پاراگراف سوم</p>

در نمونه کد بالا از سلکتور Class در CSS برای انتخاب یک پاراگراف خاص (تگ p دوم) استفاده شده و استایل صرفا به این تگ اعمال می شود.

نحوه تعریف آی دی (ID) و کلاس (Class) در CSS

گفتیم که سلکتورها الگوهای تعریف شده (Pattern) در CSS هستند، منظور از این عبارت قراردادی بودن نحوه تعریف سلکتورها در CSS با قواعد خاص خود است، آی دی (ID) و کلاس (Class) جزء پرکاربردترین سلکتورها هستند که بر اساس قانون الگو با علائم خاصی در کدهای CSS تعریف می شوند، برای تعریف آی دی از علامت # و برای کلاس از علامت نقطه در ابتدای الگو استفاده می کنیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | آی دی و کلاس در CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#main{
    display:block;
    background-color:#069;
}
.text{
    color:#FFF;
}
</style>
</head>
<body>
<div id="main" class="text">
این یک متن در آی دی main و کلاس text است.
</div>
</body>
</html>

پیش نمایش
همان طور که در کد بالا مشخص است یک تگ HTML می تواند از چند سلکتور مختلف در CSS استایل دهی شود، در اینجا برخی خصوصیات تگ div از سلکتور آی دی و برخی موارد دیگر از سلکتور کلاس به آن نسبت داده شده اند.

کجا از آی دی (ID) و کی از کلاس (Class) استفاده کنیم؟

شاید با دیدن و بررسی این نمونه کدها این سوال به ذهنمان خطور کند که کجا باید از آی دی (ID) و کی از کلاس (Class) استفاده کنیم؟ در پاسخ باید گفت که هر سلکتوری در CSS با هدف خاصی ایجاد شده که در ارتباط مستقیم با کدنویسی HTML است، در HTML برای شناسایی تگ های مختلف از هم از ID استفاده می شود، به طور مثال:

<div id="id-1"></div>
<div id="id-2"></div>
<div id="id-3"></div>

هر تگ در HTML صرفا می تواند یک ID داشته باشد به عبارتی ID ها همیشه یکتا هستند و اگر در یک صفحه از یک ID در چند مورد استفاده شود، آن صفحه از لحاظ استاندارد کدنویسی معتبر (Valid) نیست، در مقابل اگر بخواهیم یک استایل CSS را به دفعات و برای تگ های مختلف HTML استفاده کنیم، از Class استفاده می کنیم، کلاس ها می توانند به هر تعداد در صفحه تکرار شوند، در واقع هدف از ایجاد این سلکتور تعریف یک استایل و استفاده از آن به دفعات متعدد در صفحه است، به مثال زیر توجه کنید:

<div id="id-1" class="class-1"></div>
<div id="id-2" class="class-1"></div>
<div id="id-3" class="class-1"></div>

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

تعریف ویژگی، بدون آی دی و کلاس در CSS

علاوه بر کلاس و آی دی، برخی از موارد در CSS به صورت سلکتورهای کلی قابل تعریف شدن هستند، به طور مثال سلکتور body استایل خود را در حالت پیش فرض به تگ body و زیر مجموعه آن اختصاص می دهد یا سلکتور p به تمام عناصر پاراگرافی (تگ های p) موجود در صفحه وب استایل خود را اختصاص می دهد:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استایل دهی بدون آی دی و کلاس</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
p,div{
    border:#CCC 1px solid;
    padding:4px;
    color:#000;
}
#main{
    display:block;
    background-color:#069;
}
.text{
    color:#FFF;
}
</style>
</head>
<body>
<div id="main">
<p class="text">
این یک متن در آی دی main و کلاس text است، برخی ویژگی های کلی از سلکتور div و p تاثیر می پذیرند.
</p>
</div>
</body>
</html>

پیش نمایش
در مثال بالا علاوه بر استفاده از آی دی main و کلاس text به عنوان سلکتورهای اصلی، به صورت کلی نیز استایلی را برای تگ های div و p موجود در صفحه اختصاص داده ایم، با این کار تمام عناصر پاراگراف و بلاک های div آن ویژگی را خواهند داشت، دقت کنیم که در CSS قوانینی برای اولویت بندی سلکتورها وجود دارد، به طور مثال اگر دو ویژگی مشترک (به فرض color) هم در سلکتور p و هم در کلاس تعریف شده باشند، CSS اولویت را به کلاس می دهد و color موجود در سلکتور p را که به صورت کلی تعریف شده نادیده می گیرد، در نمونه کد بالا color برای سلکتور p به صورت مقدار کد هگز 000 (رنگ مشکی) در نظر گرفته شده، اما در کلاس text این مقدار FFF (رنگ سفید) است، در نتیجه رنگ متن تگ های p که کلاس text داشته باشند سفید خواهد بود، برای آشنایی بیشتر با این موضوع در ادامه به طور مختصر به مسئله قانون اولویت بندی سلکتورها در CSS می پردازیم.

قانون اولویت بندی سلکتورها در CSS

در آموزش قبل در خصوص عبارت Cascading یا آبشاری بودن CSS توضیحاتی ارائه شد، گفتیم که منظور از این عبارت پیروی سلسه مراتبی مرورگر از استایل های CSS موجود در صفحه است، یعنی اگر دو استایل مشترک در صفحه وجود داشته باشند، خاصیتی غالب می شود که در پائین ترین سطح درج شده باشد، به طور مثال در استایل های زیر ویژگی دوم غالب می شود چون در سطح پائین تری در صفحه درج شده:

<style type="text/css">
p.text{
    font-size:16px;
}
</style>
<style type="text/css">
p.text{
    font-size:12px;
}
</style>
<p class="text">پاراگراف</p>

اما تداخل همیشه بین استایل های صفحه نیست، همواره این امکان وجود دارد که خاصیت های مختلف CSS از چند سلکتور متفاوت بر روی یک تگ HTML تاثیر مشترک داشته و بین سلکتورها به اصطلاح تداخل ایجاد شود، به طور مثال در نمونه کد زیر بین سلکتور p و p.text تداخل وجود دارد:

<style type="text/css">
p{
    font-size:12px;
    color:#D3181B;
}
p.text{
    font-size:16px;
    color:#1740DD;
}
</style>
<p>پاراگراف اول</p>
<p class="text">پاراگراف دوم</p>

اگر استایل بالا را در یک صفحه HTML قرار داده و آن را اجرا کنیم، خواهیم دید که CSS در حالتی که برای تگ p کلاس در نظر گرفته شده (p.text یعنی تگ های p در صفحه که کلاس text داشته باشند)، خاصیت ها را به جای تگ p از کلاس دریافت می کند، این رفتار بر اساس قانون اولویت بندی سلکتورها در CSS صورت می گیرد که در ادامه به اختصار در مورد آن خواهیم گفت.
بر اساس قانون اولویت، هر سلکتور CSS را می توان در چهار رده

A, B, C, D

جای داد و با اعداد 0، 1 و... تعداد تکرار آنها را محاسبه کرد (این حروف و اعداد الگویی فرضی و قراردادی هستند و صرفا جهت درک بهتر و به حافظه سپردن موضوع استفاده می شوند)، در اولین رده این ساختار، استایل خطی یا Inline Style جای دارد که حرف متناظر آن A و عدد متناظر آن

1, 0, 0, 0

است، رده دوم مربوط به ID است که با حرف B و عدد متناظر

0, 1, 0, 0

مشخص می شود، در رده سوم اولویت Class قرار دارد که با حرف C و عدد متناظر

0, 0, 1, 0

متمایز می گردد، در آخرین رده سلکتور تگ یا Element قرار دارد که با حرف D و عدد متناظر

0, 0, 0, 1

مشخص می شود، به طور خلاصه و با مثال:

A - Inline Style => 1000 => <div style=""></div>
B - ID => 0100 => <style type="text/css">#your-id {}</style>
C - Class => 0010 => <style type="text/css">.your-class {}</style>
D - Element => 0001 => <style type="text/css">div {}</style>

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

<style type="text/css">
p{
    font-size:12px;
    color:#D3181B;
}
</style>
<p style="font-size:24px;">پاراگراف</p>

در مثال بالا بین استایل خطی (خاصیت font-size) با سلکتور p یا Element تداخل وجود دارد، در این حالت استایل خطی برتری دارد (اندازه فونت 24 پیکسل خواهد بود) چون درجه آن A است و عدد متناظر آن

1, 0, 0, 0

تعریف می شود که از عدد

0, 0, 0, 1

بزرگتر است!

<style type="text/css">
div p.text{
    font-size:16px;
    text-decoration:underline;
}
#main p{
    font-size: 12px;
    text-decoration:overline;
}
</style>
<div id="main">
<p class="text">پاراگراف</p>
</div>

در مثال بالا سلکتور دوم ارجحیت دارد چرا که عدد متناظر آن به صورت

0, 1, 0, 1

محاسبه می شود (آی دی main به تعداد 1 مورد در رده B و تگ p به تعداد 1 مورد در جایگاه D که در نهایت عدد آن به صورت 0101 می شود) که از عدد

0, 0, 1, 2

سلکتور اول بزرگتر است! (عدد 2 در این محاسبه یعنی 2 عنصر تگ یا Element در سلکتور وجود دارد لذا نمره متناظر آن 2 و در جایگاه D است، عدد 1 نیز به دلیل وجود یک کلاس در الگو است که جایگاه آن حرف C است).
با فهم این الگوها می توانیم درک روشنی از قوانین اولیت بندی در CSS داشته باشیم تا از سردرگمی و تعریف استایل های مبهم اجتناب کنیم.

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: HTML - CSS

قبلی »

« بعدی

مطالب بیشتر:
کاربرد خاصیت display در CSS
کاربرد ویژگی position و float در CSS
کار با border و outline در CSS
خاصیت Background و ویژگی های آن در CSS
ویژگی های Font و Text در CSS

دیدگاه

۵۴ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

آرمین

۰۰:۵۷ ۱۴۰۲/۰۱/۲۱

سلام خسته نباشید یک سوال داشتم خدمتتون برای ایدی دادن به عکس باید کجای کد نوشت؟

<"img id="your-id" src = "xxxxxxxxxx >

در نمونه کدی که درج کرده اید یک ID فرضی اضافه شد.

حامیان دانشجویی

۰۳:۴۱ ۱۴۰۰/۰۵/۳۰

با سلام و مچکر از مطلب مفیدتون
میخواستم بدون امکان داره این مطلب بصورت pdf باشه که ذخیره کنم یا به نحوی دیگه؟

متاسفانه چنین امکانی برای سایت تعریف نشده اما می توانید اطلاعات مورد نیاز را کپی و در برنامه Word برده و در نهایت به صورت PDF ذخیره کنید، لطفا "شرایط استفاده" از محتوا که لینک آن در انتهای صفحه موجود است را مطالعه بفرمایید.

عبداله

۱۶:۵۱ ۱۴۰۰/۰۵/۲۵

سلام من برای پیداکردن یک صفحه در یک سایت ای دی ۱۰۰۰۴۴۴۵ بهم دادن چطور وارد آن صفحه بشوم

منظور از ID در سوالتان مشخص نیست و ممکن است به سلکتور CSS مرتبط نباشد، ID می تواند اشاره به شماره مطلب یا موارد دیگری داشته باشد اگر ID شماره مطلب باشد شاید به صورت نمونه زیر بتوانید به صفحه دسترسی پیدا کنید:

example.com/10004445

در صورت تمایل آدرس سایت مد نظر را درج کنید شاید به درک مشکل کمک کند.

مسعود

۱۷:۵۳ ۱۳۹۹/۰۹/۲۴

سلام خسته نباشید
من از hover برای لینکهام استفاده میکنم ولی متاسفانه با این که با آیدی و کلس از هم جداشون کردم باز هم روی همه لینکهام تغییرات hover انجام میشه بفرمایید چکار کنم این تداخل ایجاد نشه

اگر لینک ها را در بلاک های والد قرار دهید مشکلی نخواهد بود، مثال:

<style>
a, a:hover {
   color: blue;
   border: 1px solid #C5C5C5;
   padding: 4px;
}
.class-name a, .class-name a:hover {
   color: red;
}
</style>
<div class="class-name">
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>

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

نهال

۰۴:۰۳ ۱۳۹۸/۰۵/۰۵

سلام . فوق العاده بود مرسی.

اکبر

۲۰:۰۰ ۱۳۹۷/۰۸/۳۰

سلام. خواستم ازتون تشکر کنم بابت راهنمایی.
من هفته پیش راجع به ضخامت تگ hr پرسیده بودم که شما راهنمایی کردید و کار من راه افتاد. ببخشید دیر تشکر میکنم چونکه یکی از قطعات کامپیوترم سوخته بود تا بیام بخرم و ویندوز نصب کنم دیر شد.
در ضمن من کل صفحات css و نظراتو گشتم اون قسمتو پیدا نکردم. دیگه اینجا از شما تشکر میکنم. باز هم مرسی.

خوشحالیم که راهنمایی مفید واقع شد، یادداشت قبلیتان در قسمت درج علامت های خاص در HTML مطرح شده است!

زهرا

۱۵:۵۴ ۱۳۹۵/۱۲/۱۹

اگر دو کلاس ویژگی های مشترکی داشتند و یک تگ از هر دو کلاس استفاده می کرد ویژگی کدام یک اعمال میشه؟

CSS برای تعیین اولیت بین اعمال ویژگی های مختلف از قانون خاص خود پیروی می کند، بر این اساس اگر هر دو کلاس دارای خاصیتی مشترک باشند (به طور مثال background-color)، کلاسی که در نهایت (سطح انتهایی تر) در صفحه تعریف شده غالب می شود، مگر اینکه کلاس اول در استایل CSS به طور مثال مستقیما به تگ خاصی نسبت داده شده باشد (به طور مثال div.your-css-class)، در این موارد کلاس اول در مقایسه با حالت عادی، امتیاز بیشتری کسب می کند و غالب خواهد شد، یک حالت دیگر نیز این است که هر کلاس ویژگی های جداگانه داشته باشند که در اینصورت هر دو بدون تداخل اعمال خواهند شد.

احسان

۰۲:۳۴ ۱۳۹۵/۱۲/۰۶

سلام ممنون از مطلب خوبتون
بنده در داخل سایتم از ووکامرس استفاده می کنم وقتی می خوام یک کلاس یا یک آی دی رو در css استایلشو تغییر بدم بفرض می خوام کلاس price رو در صفحه محصول براش border بزارم ولی وقتی این کار رو انجام می دم در صفحه ارشیو محصولات (دسته محصولات) هم نیز دور قیمت border می افته برای اینکه تغییرات کلاس css رو از این عمومیت در بیارم باید چه کار کنم؟

این موضوع به خروجی سیستم مدیریت محتوای شما بر می گردد که برای چند قسمت متفاوت از یک کلاس CSS مشترک استفاده می کند، اگر بخواهید این حالت را تغییر دهید، باید به دنبال پارامتری متفاوت در خروجی باشید (به فرض ID قسمت ها متفاوت باشد، یا احتمال دارد هر قسمت از چند کلاس استفاده کند)، اگر این پارامتر متفاوت وجود نداشت (همه قسمت صرفا یک کلاس مشترک داشتند)، باید سورس کدهای خروجی ساز برنامه مدیریت محتوای خود را ویرایش کنید، قاعدتا انجام این کار زمانبر بوده و نیاز به تسلط کافی بر PHP دارد.

بابک خان

۰۹:۵۵ ۱۳۹۵/۱۱/۲۶

اقا دمتون گرم کارتون حرف نداره عالی هستین عااااااللللللللللی

محسن(مبتدی)

۲۱:۰۳ ۱۳۹۵/۰۶/۲۶

سلام استاد خسته نباشید
من چندتا قالب آماده وبسایت دانلود کردم ولی کدهای استایل و جاو اسکریپتش رو خلاصه کردن تو چندتا لینک تو قسمت head من چطور میتونیم این لینکهای خلاصه شده رو باز کنم تا بتونم قالبها رو ویرایش کنم؟
مثلا چنتاشون رو به این صورت قرار دادن تو قسمت head

<link rel="icon" type="image/png" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel=stylesheet href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/pink-theme.css">

دقیقا متوجه منظورتان از "چطور میتونیم این لینکهای خلاصه شده رو باز کنم" نشدیم! اینها شیوه معمول طراحی قالب هستند و فایل های CSS باید در فولدر قالب موجود باشند که با یک برنامه ویرایش استایل مانند Adobe Dreamweaver یا PHPStorm می توانید فایل را باز کرده و قسمت های مورد نظر را تغییر دهید!

امیر

۱۶:۲۴ ۱۳۹۴/۰۹/۰۱

ممنون
مشکلم حل شد

زیبایی

۰۹:۴۸ ۱۳۹۴/۰۸/۱۹

سلام من یک css نوشتم برای منو ابشاری تا دیروز درست کار می کرد از دیروز وقتی روی آیتم های منو موس را می برم آیتم قبلی کش میده و تغییر سایز می دهد و آیتمی که روی آن موس را گرفته ام کوچک می شود و زیر منو آن با فاصله دیده می شود و قابل انتخاب نیست
ایا می دانید مشکل چیست و چگونه حل می شه

تا زمانی که در صفحه خود استایل یا تغییر دیگری ایجاد نکنید، قاعدتا نباید تفاوتی در نحوه عمل منو وجود داشته باشد، لذا در ابتدا باید ببینید چه کد یا ابزاری به خروجی صفحه اضافه شده که می تواند روی منو تاثیر بگذارد، به فرض برخی از خاصیت ها در CSS بدون تعریف کلاس مخصوص به تمام تگ ها اختصاص داده می شوند، به طور مثال سلکتور a می تواند روی تمام لینک ها موثر باشد، مگر اینکه برای آنها کلاس و خاصیت منحصر به فرد تعریف کنید، به هر حال بدون دیدن سورس کدهای صفحه خیلی نمی توان پاسخ قاطعی ارائه کرد!

فرهاد ف

۲۰:۱۶ ۱۳۹۴/۰۸/۱۲

سلام استاد.
دست مریزاد.
آقای مهندس در پاسخ به کاربر آقا علیرضا که در صفحه اول سوال مطرح کردن، منظور از تغییر title یعنی چی؟ ما یه title داشتیم که مال بالای صفحه بود و عنوان سایت رو توش می نوشتیم حالا که میگن صفت title یعنی چی رو بیایم و عوض کنیم؟
این سوالشون بود: سلام می خواستم بدونم چطور میشه رنگ یا فونت صفت title رو با css تغییر داد

title مد نظر شما در واقع تگ title در HTML است، اما سوال کاربر مربوط به صفت یا Attribute تگ ها است، به فرض:

<a href="#" title="Hello, i am a link!">لینک</a>

این title در زمانی که چند لحظه ماوس را روی عبارت "لینک" نگهدارید، نمایان می شود!

داوود

۰۹:۳۸ ۱۳۹۴/۰۷/۰۹

سلام آقای مهندس، صبحتون بخیر و خوشی؛
استاد یه سوال دارم ازتون که شاید پیش پا افتاده باشه ولی چون مقدمه سوال بعدیم هستش گفتم که اول این رو ازتون بپرسم و بعدش برم سراغ سوال بعدیم. اونهم اینه که چرا گاهی اوقات تو کدهای css میان و از کلمه کلیدی div استفاده می کنن؟ و اینکه آیا اگه مثلا ما اینجوری

.div

استفاده کنیم، دیگه div رو از حالت عمومیش خارج کردیم. درست میگم؟؟ بازم ببخشید اگه سوال پیش پا افتاده ای هستش.
الان در این مثالها شرحی که بابت هر کد دادم آیا درسته:
الف)

div span{
color:red;
}

کلیه span هایی که در کلیه div های موجود در صفحه (صرفنظر از هر نام div) واقع شده اند رو تحت تاثیر قرار میده.
ب)

div .span{
color:red;
}

کلیه div هایی که شامل کلاس span هستن رو تحت تاثیر قرار میده.
حالا امکانش هست بگید آیا این کدهای زیر درست هستن و اگه آره طرز تحت تاثیر قرار دادنشون به چه نحوی هستش:
ج)

span.div{
color:red;
}

د)

.div .span{
color:red;
}

هـ)

.div span{
color:red;
}

و)

.div.span{
color:red;
}

در پاسخ دادن به این سوال عجله ندارم استاد عزیز؛ البته ببخشید این سوال چون پیش مقدمه سوال بعدیم هستش.

قبلا به این موارد پاسخ داده شده! صرفا جهت یادآوری:
- زمانی که علامت . در CSS استفاده می کنیم، عبارت مورد نظر هر چه که باشد، تبدیل به یک class می شود و div یا هر چیز دیگر بودن تفاوتی ندارد (باید با سلکتور کلاس فراخوانی شود).
- زمانی که یک دستور از چند قسمت تشکیل می شود، معمولا عنصر هدف، تگ آخر است و تگ های ماقبل سلسله قرارگرفتن را نشان می دهد، مثال:

div .span

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

.div.span{
color:red;
}

همین طور مثال زیر:

<style type="text/css">
span.div{
	color:#249FE4;
}
</style>
<span class="div">test</span>

محسن

۰۳:۵۳ ۱۳۹۴/۰۶/۰۸

خسته نباشید میگم واقعا کارتون عالیه

نخست

قبلی

بعدی

آخر

صفحه 1 از 4

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