ترکیب‌کننده‌ها در CSS (شیوه‌نامه‌های قرارگیری پویش‌گر) نمادهای یا نویسه‌هایی هستند که رابطه بین عناصر مختلف HTML را که می‌خواهید استایل دهید، مشخص می‌کنند. این ترکیب‌کننده‌ها به شما کمک می‌کنند تا عناصر را بر اساس موقعیت و سلسله مراتب آن‌ها در سند HTML انتخاب کنید.
این ترکیب‌کننده‌ها به شما امکان می‌دهند استایل‌ها را به صورت انتخابی بر اساس روابط بین عناصر در ساختار HTML خود اعمال کنید، به گونه‌ای که CSS شما بیشتر خاص و هدفمند باشد تا اثرات استایل مطلوب را به دست آورید.
چهار نوع اصلی ترکیب‌کننده در CSS وجود دارد:
-
ترکیب‌کننده فرزند (فاصله): این ترکیب‌کننده عناصر فرزندی را انتخاب می‌کند که داخل عنصر مادر مورد نظر قرار دارند.
-
ترکیب‌کننده فرزند مستقیم (>): این ترکیب‌کننده عناصر فرزندی را انتخاب می‌کند که به طور مستقیم درون عنصر مادر مورد نظر قرار دارند.
-
ترکیب‌کننده همنوایی مجاور (+): این ترکیب‌کننده عنصری را که به طور مستقیم بعد از عنصر مشخص شده قرار دارد را انتخاب می‌کند.
-
ترکیب‌کننده همنوایی عمومی (~): این ترکیب‌کننده تمام عناصر همنوایی را که پس از عنصر مشخص شده قرار دارند، اما به طور مستقیم مجاور آن نیستند را انتخاب می‌کند.
Descendant Combinator (space)
ترکیب‌کننده فرزند (با فاصله) در CSS، عناصری را که فرزند عنصر مشخصی هستند، انتخاب می‌کند.
اگر یک عنصر بازگو کننده (descendant) مطابقت داشته باشد و یک پدر (والد، والد والد و …) داشته باشد که با انتخاب‌کننده اول مطابقت دارد، آن عنصر انتخاب می‌شود.
به عنوان مثال، اگر یک ساختار HTML مانند زیر داشته باشیم:
<div>
<p>پاراگراف ۱</p>
<p>پاراگراف ۲</p>
</div>می‌توانیم تمام عناصر <p> داخل <div> را به این صورت انتخاب کنیم:
div p {
/* سبک‌های CSS */
}کد زیر استفاده از ترکیب‌کننده فرزند را نشان می‌دهد. در این مثال، یک عنصر والد <div> با نام کلاس parent داریم. در داخل این عنصر والد، چندین عنصر <p> وجود دارد. ما برخی از سبک‌ها را به عناصر فرزند با نام کلاس child اعمال می‌کنیم.
<html>
<head>
<title>مثال ترکیب‌کننده فرزند</title>
<style>
.parent {
background-color: lightblue;
padding: 20px;
}
.parent p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent">
<h1>این عنصر والد است</h1>
<p>این یک پاراگراف در داخل عنصر والد است.</p>
<p>این یک پاراگراف در داخل عنصر والد است.</p>
</div>
<div>
<p>این یک پاراگراف خارج از عنصر والد است.</p>
</div>
</body>
</html>Using List
در این مثال، ما از ترکیب‌کننده فرزند برای عناصر لیست استفاده می‌کنیم. می‌خواهیم تمامی عناصر لیست داخل عنصر <div> را سبک‌دهی کنیم.
<html>
<head>
<title>مثال ترکیب‌کننده فرزند</title>
<style>
div ul {
background-color: lightblue;
padding: 10px;
}
div ul li {
color: white;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div>
<h2>میوه‌ها</h2>
<ul>
<li>سیب</li>
<li>موز</li>
<li>پرتقال</li>
</ul>
</div>
</body>
</html>در اینجا، ما به تمامی عناصر <ul> داخل عنصر <div> سبک‌های خاصی می‌دهیم. همچنین، تمامی عناصر <li> داخل <ul> به سبک خاصی سبک‌دهی می‌شوند، که اینجا به رنگ سفید و فاصله پایین مارجین داده شده است.
Child Combinator (>)
ترکیب‌کننده فرزند (>)، که با نماد بزرگتر از علامت (>) نمایش داده می‌شود، تمامی عناصری را که فرزندان فوری یک عنصر مشخص هستند، انتخاب می‌کند. با استفاده از ساختار HTML مشابه مثال بالا، می‌توانید فقط عناصر <p> فرزند فوری را به این صورت هدف قرار دهید:
div > p {
/* استایل‌های CSS */
}در مثال زیر، استفاده از انتخاب‌کننده فرزند (>) را نشان می‌دهد. در این مثال، یک عنصر والد <div> با نام کلاس parent وجود دارد. درون عنصر والد، چند عنصر <p> وجود دارد. ما می‌خواهیم یک استایل خاص را به عناصر فرزند با نام کلاس child اعمال کنیم.
<html>
<head>
<title>مثال ترکیب‌کننده فرزند</title>
<style>
.parent > .child {
color: blue;
}
</style>
</head>
<body>
<div class="parent">
<p>این عنصر والد است.</p>
<p class="child">این اولین عنصر فرزند است.</p>
<p class="child">این دومین عنصر فرزند است.</p>
<p>این سومین عنصر فرزند است.</p>
<p>این چهارمین عنصر فرزند است.</p>
</div>
<div>
<p>این یک پاراگراف دیگر است.</p>
</div>
</body>
</html>در مثال بالا، ترکیب‌کننده فرزند (>) استفاده می‌شود تا عناصر خاصی که فرزندان مستقیم یک عنصر والد هستند را هدف قرار دهد، که این امکان را برای استایل‌دهی و سفارشی‌سازی دقیق‌تر فراهم می‌کند.
Adjacent sibling Combinator (+)
ترکیب‌کننده خواهر نزدیک (+)، عنصری را که بلافاصله پیش از یک عنصر مشخص قرار گرفته است، انتخاب می‌کند. به عنوان مثال، اگر شما دارای HTML زیر باشید:
<h2>عنوان 1</h2>
<p>پاراگراف 1</p>
<h2>عنوان 2</h2>
<p>پاراگراف 2</p>شما می‌توانید به عنصر <p> که بلافاصله پس از یک <h2> آمده است، به این شکل هدف قرار دهید:
h2 + p {
/* استایل‌های CSS */
}کد زیر نحوه استفاده از انتخاب‌کننده خواهر نزدیک (+) را نشان می‌دهد. در این مثال، ما پاراگراف‌ها را هدف قرار می‌دهیم که بلافاصله پس از عناصر <h2> قرار دارند.
<html>
<head>
<style>
h2 + p {
color: red;
}
</style>
</head>
<body>
<div>
<h2>مثالی از انتخاب‌کننده خواهر نزدیک</h2>
<p>این اولین پاراگراف است.</p>
<p>این دومین پاراگراف است.</p>
</div>
<div>
<p>این سومین پاراگراف است.</p>
<p>این چهارمین پاراگراف است.</p>
</div>
</body>
</html>در مثال دیگر زیر نحوه استفاده از انتخاب‌کننده خواهر نزدیک (+) را نشان می‌دهد.
div + span: این عنصر span را که بلافاصله پس از یک عنصر div قرار دارد انتخاب می‌کند. رنگ متن span را به قرمز تنظیم می‌کند.span + button: این عنصر button را که بلافاصله پس از یک عنصر span قرار دارد انتخاب می‌کند. رنگ پس زمینه دکمه را به زرد تنظیم می‌کند.button + ul: این عنصر ul را که بلافاصله پس از یک عنصر button قرار دارد انتخاب می‌کند. نوع استایل لیستی از لیست نامرتب را به مربع‌های محوری تغییر می‌دهد.
<html>
<head>
<style>
div + span {
color: red;
}
span + button {
background-color: yellow;
}
button + ul {
list-style-type: square;
}
</style>
</head>
<body>
<div>این یک عنصر div است.</div>
<span>این یک عنصر span است.</span>
<button>این یک عنصر دکمه است.</button>
<ul>
<li>مورد لیست 1</li>
<li>مورد لیست 2</li>
<li>مورد لیست 3</li>
</ul>
</body>
</html>General sibling Combinator (~)
انتخاب‌کننده خواهر عمومی (~)، همه عناصر را که خواهران یک عنصر مشخص هستند، انتخاب می‌کند. این مشابه انتخاب‌کننده خواهر نزدیک است اما نیازی به این ندارد که عناصر بلافاصله مجاور باشند. به عنوان مثال:
<h2>عنوان 1</h2>
<p>پاراگراف 1</p>
<h2>عنوان 2</h2>
<p>پاراگراف 2</p>شما می‌توانید تمام عناصر <p> را که خواهران </h2> هستند، به این شکل هدف قرار دهید:
h2 ~ p {
/* استایل‌های CSS */
}کد زیر از انتخاب‌کننده خواهر عمومی (div ~ p) برای انتخاب تمام عناصر <p> استفاده می‌کند که خواهران یک <div> هستند. در این مورد، انتخاب‌کننده هدف پاراگراف‌های دوم و سوم است و استایل مشخص‌شده را برای آن‌ها اعمال می‌کند.
<html>
<head>
<style>
div ~ p {
color: blue;
}
</style>
</head>
<body>
<h2>مثالی از انتخاب‌کننده خواهر عمومی <h2>
<div>
<p>این پاراگراف توسط انتخاب‌کننده خواهر عمومی تحت تاثیر قرار نمی‌گیرد.</p>
</div>
<p>این پاراگراف توسط انتخاب‌کننده خواهر عمومی تحت تاثیر قرار می‌گیرد.</p>
<p>این پاراگراف نیز توسط انتخاب‌کننده خواهر عمومی تحت تاثیر قرار می‌گیرد.</p>
</body>
</html>در مثال زیر یک عنصر <div> شامل سه دکمه است، پس از آن سه دکمه اضافی خارج از <div> قرار دارد. کد CSS تمام دکمه‌ها را که خواهران عنصر <div> هستند، با استفاده از انتخاب‌کننده خواهر عمومی (div ~ button) انتخاب می‌کند.
<html>
<head>
<title>مثالی از انتخاب‌کننده خواهر عمومی</title>
<style>
div ~ button {
background-color: blue;
color: white;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<button>دکمه ۱</button>
<button>دکمه ۲</button>
<button>دکمه ۳</button>
</div>
<button>دکمه ۴</button>
<button>دکمه ۵</button>
<button>دکمه ۶</button>
</body>
</html>Nesting of Combinators
در این مثال، از ترکیب‌های مختلفی از انتخاب‌کننده‌ها برای هدف‌گیری از بخش‌های خاص سند HTML استفاده شده است.
در این مثال، ما از چندین انتخاب‌کننده و ترکیب‌کننده CSS برای اعمال استایل به عناصر خاص در سند HTML استفاده کرده‌ایم.
- انتخاب‌کننده والدین (.parent): استفاده از این انتخاب‌کننده برای اعمال استایل به المان‌های والدین.
- انتخاب‌کننده فرزندان (.parent .child): استفاده از این انتخاب‌کننده برای اعمال استایل به المان‌های فرزند درون المان والد.
- انتخاب‌کننده نسلی (.parent span): استفاده از این انتخاب‌کننده برای اعمال استایل به المان‌های نسلی داخل المان والد.
- انتخاب‌کننده خواهر نزدیک (.parent + .sibling): استفاده از این انتخاب‌کننده برای اعمال استایل به المانی که بلافاصله بعد از المان والد قرار دارد.
- انتخاب‌کننده خواهر کلی (.parent ~ .sibling): استفاده از این انتخاب‌کننده برای اعمال استایل به تمامی المان‌های خواهری که بعد از المان والد قرار دارند، بدون در نظر گرفتن فاصله بین آن‌ها.
در نهایت، ما از تمامی این انتخاب‌کننده‌ها و ترکیب‌های آن‌ها استفاده کرده‌ایم تا به طور دقیق بخش‌های مختلف سند HTML را هدف قرار دهیم و استایل‌های مختلفی به آن‌ها اعمال کنیم.
<html>
<head>
<title>Nesting of Combinators</title>
<style>
/* Parent selector */
.parent {
background-color: lightblue;
padding: 20px;
}
/* Child selector */
.parent .child {
background-color: lightgreen;
padding: 10px;
}
/* Descendant selector */
.parent span {
color: red;
}
/* Adjacent sibling selector */
.parent + .sibling {
font-weight: bold;
}
/* General sibling selector */
.parent ~ .sibling {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<span>This is a child element</span>
</div>
</div>
<div class="sibling">This is a sibling element</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام