سلکتور های CSS چیست؟ در واقع وظیفه سلکتور های سی اس اس این است که به شما امکان انتخاب المان های HTML را بدهد تا شما بتوانید به سلیقه خودتان به آن استایل بدهید. در این مقاله قصد داریم شما را با انواع سلکتور های CSS آشنا کنیم، در ادمه همراه داتیس نتورک باشید.
سلکتور CSS چیست؟
انتخابگر های سی اس اس در واقع این امکان را به شما می دهد که المان های HTML را انتخاب کرده و با توجه به نیاز و سلیقه خود به آن استایل دهید و نحوه نمایش و ظاهره آن را تغییر دهید
روش های استفاده از Selector ها
روش یک: سلکتور های ساده
یکی از روش ها این است که ما میتوانیم عناصر و المان های HTML را بر اساس نام، کلاس، آیدی انتخاب کنیم و به آن استایل دهیم.
مثال انتخاب المان با استفاده از نام
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: blue;
font-size:20px
}
</style>
</head>
<body>
<p>datisnetwork.com</p>
</body>
</html>
مثال انتخاب المان با استفاده از آیدی
<!DOCTYPE html>
<html>
<head>
<style>
#datis {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="datis">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
همان طور که در مثال بالا مشاهده کردید پاراگراف دوم ظاهرش نغییر نکرد و دلیل این است که به ان آیدی ندادیم.
مثال انتخاب المان با استفاده از کلاس
<!DOCTYPE html>
<html>
<head>
<style>
.datis {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="datis">Red and center-aligned heading</h1>
<p class="datis">Red and center-aligned paragraph.</p>
</body>
</html>
روش دوم : سلکتور به صورت ترکیبی
یکی از روش ها برای استفاده از سلکتور ها که پیشنهاد می شود این است که به صورت ترکیبی المان های html را انتخاب کنیم.
مثال سلکتور ترکیبی:
<!DOCTYPE html>
<html>
<head>
<style>
.heading,#paragraph,.paragraph2 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="heading">heading</h1>
<p id="paragraph">paragraph.</p>
<p class="paragraph2">paragraph2.</p>
</body>
</html>
همان طور که در مثال بالا دیدید به جای اینکه بیایم برای هرکدوم به صورت جداگانه استایل تعریف کنیم با ترکیب سلکتور ها یکبار فقط استایل نوشتیم. و این کار هم به صرفه جویی در زمان، کمتر شدن کد ها،سبک شدن سایت و… کمک می کند.
نکته: برای گروه بندی انتخابگرها ، هر انتخابگر را با کاما (,) جدا کنید.
روش سوم : سلکتور عمومی ستاره (*)
یکی دیگر از روش های برای استفاده از سلکتور ها سلکتور عمومی است، این سلکتور به این صورت است که همه عناصر HTML موجود در صفحه را انتخاب می کند.
مثال سلکتور Global :
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="datis">Me too!</p>
<p>And me!</p>
</body>
</html>
همان طور که در مثال بالا دیدید برای این سلکتور اسم کلاس با آیدی تفاوتی ندارد و بدون هیچ چون و چرایی استایل را به کل المان های داکیومنت HTML اعمال میکند.
یکی از مزایای این سلکتور این است که برای مثال شما می خواهید فونت سایت را تغییر بدید و به جای اینکه دونه دونه تغییر بدهید می توانید کل آن را با سه خط کد عوض کنید.
روش چهارم : سلکتور attribute
یکی دیگر از روش ها برای استفاده از سلکتور ها سلکتور اتریبیوت است. این سلکتور برای انتخاب عناصر با ویژگی مشخص استفاده می شود.
مثال سلکتور ویژگی:
<!DOCTYPE html>
<html>
<head>
<style>
a[id] {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a Id attribute gets a green background:</p>
<a href="https://www.datisnetwork.com/">datisnetwork.com/</a>
<a href="http://www.google.com" id="_blank">google.com</a>
<a href="http://www.wikipedia.org" id="_top">wikipedia.org</a>
</body>
</html>
اگر خروجی کد بالا را ببینید لینک های گوگل و ویکی پدیا دارای رنگ سیز هستند.
امیدواریم مقاله آموزش کامل سلکتور CSS برای شما مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی دنبال کنید.
