CSS Selectors

آموزش کامل CSS Selectors با کد مثال

مقدمه:

CSS (Cascading Style Sheets) یک زبان برنامه‌نویسی است که برای توصیف نحوه نمایش و طراحی وبسایت‌ها استفاده می‌شود. یکی از اجزای کلیدی CSS، مفهوم “انتخاب‌گرها” (Selectors) است. انتخاب‌گرها در CSS برای انتخاب و تغییر ویژگی‌های مشخصی از المان‌های HTML استفاده می‌شوند. در این مقاله، به بررسی انواع انتخاب‌گرها در CSS می‌پردازیم و نحوه استفاده از هرکدام را توضیح می‌دهیم.

 انتخاب‌گر المان در CSS (The CSS element Selector)

انتخاب‌گر المان (Element Selector) یکی از ساده‌ترین انتخاب‌گرها در CSS است. با استفاده از این انتخاب‌گر، می‌توانیم ویژگی‌هایی را برای تمام المان‌هایی که با یک نام المان مشخص شده‌اند، تعیین کنیم. برای استفاده از انتخاب‌گر المان، نام المان مورد نظر را درون علامت “تگ” در دستور CSS قرار می‌دهیم. به عنوان مثال:

“`

p {
color: blue;
}

“`

در این مثال، همه المان‌های <p> در صفحه با رنگ آبی نمایش داده می‌شوند.

انتخاب‌گر شناسه در CSS (The CSS id Selector)

انتخاب‌گر شناسه (ID Selector) به ما امکان می‌دهد یک المان خاص را با استفاده از شناسه یکتای آن انتخاب کنیم. برای استفاده از انتخاب‌گر شناسه، نام المان مورد نظر را در برابر علامت # قرار می‌دهیم. به عنوان مثال:

“`

#my-element {
background-color: yellow;
}

“`

در این مثال، المانی که شناسه‌اش “my-element” است، با پس‌زمینه زرد نمایش داده می‌شود.

انتخاب‌گر کلاس در CSS (The CSS class Selector)

انتخاب‌گر کلاس (Class Selector) به ما امکان می‌دهد المان‌هایی را با استفاده از نام کلاس‌های تعیین شده برای آن‌ها انتخاب کنیم. برای استفاده از انتخاب‌گر کلاس، نام کلاس را در برابر علامت . قرار می‌دهیم. به عنوان مثال:

“`

.my-class {
font-weight: bold;
}

“`

در این مثال، تمام المان‌هایی که کلاس “my-class” را دارند، با وزن متن ضخیم نمایش داده می‌شوند.

انتخاب‌گر یونیورسال در CSS (The CSS Universal Selector)

انتخاب‌گر یونیورسال (Universal Selector) به ما امکان می‌دهد تمام المان‌ها را در یک صفحه انتخاب کنیم. برای استفاده از انتخاب‌گر یونیورسال، علامت * را در دستور CSS قرار می‌دهیم. به عنوان مثال:

“`

* {
margin: 0;
padding: 0;
}

“`

در این مثال، همه المان‌ها در صفحه بدون حاشیه (margin) و بدون پرش (padding) نمایش داده می‌شوند.

انتخاب‌گر گروهی در CSS (The CSS Grouping Selector)

انتخاب‌گر گروهی (Grouping Selector) به ما امکان می‌دهد چندین انتخاب‌گر را در یک دستور CSS ترکیب کنیم. با استفاده از این انتخاب‌گر، می‌توانیم ویژگی‌های مشترک را برای چندین المان در یک بلاک CSS تعیین کنیم. به عنوان مثال:

“`

h1, h2, h3 {
color: red;
}

“`

در این مثال، تمام المان‌های h1, h2, h3 با رنگ قرمز نمایش داده می‌شوند.

نمونه کد اول CSS Selectors به همراه توضیحات:

/* کد CSS */

/* Selector عنصر */
h1 {
color: blue;
}

/* Selector کلاس */
.my-class {
font-size: 18px;
}

/* Selector id */
#my-id {
background-color: yellow;
}

/* Selector وابسته به عنصر */
div p {
font-weight: bold;
}

/* Selector وابسته به کلاس */
.my-class span {
text-decoration: underline;
}

/* Selector وابسته به id */
#my-id .inner-element {
color: red;
}

/* Selector وابسته به عنصر درون برچسب */
a[href="https://www.example.com"] {
text-decoration: none;
}

/* Selector وابسته به عنصر درون برچسب با عنصر دیگر */
ul li:first-child {
color: green;
}

“`

توضیحات:

– **Selector عنصر**: این Selector با استفاده از نام عنصر HTML، به تمام عناصر مورد نظر تطبیق می‌یابد. در مثال بالا، `h1` یک Selector عنصر است که به همه عناصر `h1` در صفحه اعمال می‌شود و رنگ متن آنها را به آبی تغییر می‌دهد.

– **Selector کلاس**: این Selector با استفاده از نام کلاس، به تمام عناصری که کلاس مشخص شده را انتخاب می‌کند. در مثال بالا، `.my-class` یک Selector کلاس است که به همه عناصری که کلاس `my-class` را دارند، اعمال می‌شود و اندازه فونت آنها را به 18 پیکسل تغییر می‌دهد.

– **Selector id**: این Selector با استفاده از نام شناسه، به عنصری که شناسه مشخص شده را انتخاب می‌کند. در مثال بالا، `#my-id` یک Selector id است که به عنصری که شناسه `my-id` را دارد، اعمال می‌شود و رنگ پس زمینه آن را به زرد تغییر می‌دهد.

– **Selector وابسته به عنصر**: این Selector با استفاده از نام دو عنصر، به عناصری که داخل یک عنصر دیگر قرار دارند را انتخاب می‌کند. در مثال بالا، `div p` یک Selector وابسته به عنصر است که به تمام عناصر `p` که داخل عنصر `div` قرار دارند، اعمال می‌شود و وزن فونت آنها را به بولد تغییر می‌دهد.

– **Selector وابسته به کلاس**: این Selector با استفاده از نام یک عنصر و نام کلاس، به عناصری که درون یک عنصر دیگر قرار دارند و کلاس مورد نظر را دارند را انتخاب می‌کند. در مثال بالا، `.my-class span` یک Selector وابسته به کلاس است که به تمام عناصر `span` که درون عنصری با کلاس `my-class` قرار دارند، اعمال می‌شود و خط زیر آنها را می‌کشد.

– **Selector وابسته به id**: این Selector با استفاده از نام یک عنصر و نام شناسه، به عناصری که درون یک عنصر دیگر قرار دارند و شناسه مورد نظر را دارند را انتخاب می‌کند. در مثال بالا، `#my-id .inner-element` یک Selector وابسته به id است که به تمام عناصری که کلاس `inner-element` را دارند و درون عنصری با شناسه `my-id` قرار دارند، اعمال می‌شود و رنگ متن آنها را به قرمز تغییر می‌دهد.

– **Selector وابسته به عنصر درون برچسب**: این Selector با استفاده از نام یک عنصر و ویژگی‌های برچسب، به عناصری که درون یک برچسب خاص قرار دارند و ویژگی‌های مشخص شده را دارند را انتخاب می‌کند. در مثال بالا، `a[href=”https://www.example.com”]` یک Selector وابسته به عنصر درون برچسب است که به تمام عناصر `a` که ویژگی `href` با مقدار `https://www.example.com` را دارند، اعمال می‌شود و خط زیر آنها را حذف می‌کند.

– **Selector وابسته به عنصر درون برچسب با عنصر دیگر**: این Selector با استفاده از نام یک عنصر و ویژگی‌های برچسب، به عناصری که درون یک برچسب خاص قرار دارند و عنصر دیگری را درون خود دارند را انتخاب می‌کند. در مثال بالا، `ul li:first-child` یک Selector وابسته به عنصر درون برچسب با عنصر دیگر است که به تمام عناصر `li` که درون عنصر `ul` قرار دارند و اولین فرزند این عنصر `ul` هستند، اعمال می‌شود و رنگ متن آنها را به سبز تغییر می‌دهد.

نمونه کد دوم CSS Selectors به همراه توضیحات:

<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
/* CSS for element selector */
p {
color: blue;
}

/* CSS for ID selector */
#header {
background-color: yellow;
}

/* CSS for class selector */
.highlight {
font-weight: bold;
}

/* CSS for universal selector */
* {
margin: 0;
padding: 0;
}

/* CSS for grouping selector */
p, .highlight {
font-size: 20px;
}
</style>
</head>
<body>
<h1 id="header">Welcome to CSS Selectors Example</h1>

<p>This is a paragraph with the element selector.</p>

<p class="highlight">This is a paragraph with the class selector.</p>

<p>This is another paragraph with the element selector.</p>

<p class="highlight">This is another paragraph with the class selector.</p>
</body>
</html>

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

– انتخابگر المان: تمام عناصر `<p>` رنگ آبی خواهند شد.
– انتخابگر شناسه: المان با شناسه “header” پس زمینه زرد رنگ خواهد داشت.
– انتخابگر کلاس: تمام عناصر با کلاس “highlight” دارای قلم‌های پررنگ خواهند بود.
– انتخابگر همگانی: تمام عناصر صفحه، همچون حاشیه‌ها و پرش‌ها، نوار پیشرفت و غیره با صفر تنظیم می‌شوند.
– انتخابگر گروهی: تمام المان‌های `<p>` و المان‌های با کلاس “highlight” اندازه قلم 20 پیکسل خواهند داشت.

با اجرای این کد، می‌توانید تأثیر هر یک از انتخابگرها را بر روی المان‌های مربوطه مشاهده کنید.

عملگرهای انتخاب پیچیده‌تر مانند انتخاب المان‌های فرزند (`>`)، انتخاب المان‌های قبل از (`+`) و غیره در CSS

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

1. عملگر `>` (فرزند):

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

مثال:

div > p {
/* انتخاب المان p که فرزند المان div است */
}

“`

2. عملگر `+` (قبل از):

این عملگر به شما امکان می‌دهد المان‌هایی را که مستقیماً قبل از یک المان دیگر قرار دارند، انتخاب کنید. شما می‌توانید المان‌هایی را که در یک سطح و همسایگی با المان دیگر قرار دارند، انتخاب کنید. برای استفاده از این عملگر، شما نام المان اول را وارد کرده و سپس علامت `+` و سپس نام المان دوم را قرار می‌دهید.

مثال:

h2 + p {
/* انتخاب المان p که مستقیماً قبل از المان h2 قرار دارد */
}

“`

3. عملگر `~` (همسایگی):

این عملگر به شما امکان می‌دهد المان‌هایی را که با یک المان دیگر در یک سطح و همسایگی قرار دارند، انتخاب کنید. شما می‌توانید المان‌هایی را که با المان دیگری در یک سطح همسایگی دارند، انتخاب کنید. برای استفاده از این عملگر، شما نام المان اول را وارد کرده و سپس علامت `~` و سپس نام المان دوم را قرار می‌دهید.

مثال:

h2 ~ p {
/* انتخاب المان p که با المان h2 در یک سطح همسایگی قرار دارد */
}

“`

نمونه کد با مثال:

البته! در اینجا یک کد مثال با استفاده از عملگرهای انتخاب پیچیده‌تر در CSS آورده شده است:

HTML:

<div>
<h2>عنوان اصلی</h2>
<p>متن اول</p>
<p>متن دوم</p>
</div>
<div>
<h2>عنوان دیگر</h2>
<p>متن سوم</p>
<p>متن چهارم</p>
</div>

“`

CSS:

div > p {
color: blue;
}
h2 + p {
font-weight: bold;
}
h2 ~ p {
background-color: yellow;
}

“`

توضیحات:
– عملگر `div > p` انتخاب تمام المان‌های `<p>` که فرزند المان `<div>` هستند را تعیین می‌کند. در این مثال، تمام المان‌های `<p>` داخل `<div>` ها رنگ آبی خواهند شد.
– عملگر `h2 + p` المان `<p>` بلافاصله پس از المان `<h2>` را انتخاب می‌کند. در اینجا، المان `<p>` پس از المان `<h2>`، وزن متنی برجسته‌ای (bold) خواهد داشت.
– عملگر `h2 ~ p` تمام المان‌های `<p>` همسایه المان `<h2>` را انتخاب می‌کند. در این مثال، تمام المان‌های `<p>` همسایه المان `<h2>` با رنگ پس‌زمینه زرد نمایش داده می‌شوند.

از این مثال می‌توانید درک بهتری از نحوه استفاده از عملگرهای انتخاب پیچیده‌تر در CSS پیدا کنید.

سوالات متداول:

نتیجه‌گیری:

انتخاب‌گرها یکی از اجزای کلیدی در CSS هستند و به ما امکان می‌دهند المان‌های مورد نظر را در صفحات وب انتخاب و ویژگی‌های آن‌ها را تغییر دهیم. با استفاده از انتخاب‌گر المان، شناسه، کلاس، یونیورسال و گروهی، می‌توانیم سبک‌دهی و طراحی مناسب را برای وبسایت‌ها انجام دهیم و تجربه کاربری بهتری را ارائه دهیم.