سلکتورهای پیشرفته CSS

combinator چیست؟

combinator در لغت به معنای «ترکیب کننده» یا «ادغام‌گر» است و در زبان CSS به چیز هایی گفته می شود که روابط بین سلکتور (selector) های CSS را تعیین می کند. البته در دنیای وب فارسی و انگلیسی با نام دیگری نیز آن ها را می شناسند؛ سلکتور های پیشرفته CSS.

تا اینجای کار یاد گرفته ایم که با سه روش متفاوت عناصر HTML را در زبان CSS هدف قرار بدهیم: سلکتور کلاس (class.) و سلکتور آیدی (id#) و سلکتور عنصر (div) . در این قسمت با موارد بیشتری آشنا خواهید شد.

Descendant Selector

descendant در لغت به معنی «نسل» و «نواده» است و همانطور که حدس می زنید با استفاده از این سلکتور، که یک اسپیس ساده است، می گوییم که یک عنصر نواده ی عنصر دیگری است (رابطه ی پدر و فرزندی عناصر). به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال دستور CSS خود را به این شکل نوشته ایم:

div p {
  background-color: yellow;
}

این دستور می گوید تمام تگ های <p> را که درون یک تگ <div> هستند هدف قرار بده، به همین دلیل در خروجی این کد تگ های <p> که داخل عنصر <div> نبوده اند تغییری نکرده اند. بنابراین با اضافه کردن یک space بین دو تگ به آن ها رابطه ی پدر و فرزندی می دهید.

Child Selector

child در لغت به معنی «فرزند» است و کار آن هدف قرار دادن فرزندانِ مستقیم یک عنصر است. علامت این سلکتور < است. در مثال زیر میخواهیم تمام تگ های <p> را انتخاب کنیم که فرزند مستقیمِ عنصر <div> هستند:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

آیا متوجه تفاوت بین این دو دستور شدید؟ تفاوت child به معنی فرزند و descendant به معنی نواده چیست؟ در مثال بالا از آنجا که پاراگراف شماره 3 درون یک <span> قرار دارد، دیگر فرزندِ مستقیمِ عنصر <div> محسوب نمی شود بنابراین تاثیری هم نمیپذیرد. اگر شما به جای استفاده از سلکتور < از یک اسپیس استفاده کنید، پارگراف شماره سوم هم رنگی می شود.

Adjacent Sibling Selector

adjacent به معنی «مجاور» و sibling به معنی «خواهر یا برادر» است بنابراین می توان فهمید که این سلکتور خواهر یا برادرهای کنار هم یا همان خواهر یا برادرهای مستقیم را هدف قرار میدهد. علامت این سلکتور + است. در مثال زیر می خواهیم تمام عناصر <p> که دقیقا پس از <div> آمده اند (با <div> برادر هستند) را هدف بگیریم:

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: پاراگراف شماره 1 درونِ <div> است بنابراین رابطه ی آن از نوع فرزندی است و برادر محسوب نمی شوند اما پاراگراف 3 دقیقا پس از بسته شدن <div> آمده است به همین دلیل نیز با هم برادر محسوب می شوند. دقت کنید از آنجا که پاراگراف 3 دقیقا پس از بسته شدن <div> آمده است برادر مستقیم محسوب می شود.

General Sibling Selector

general در لغت به معنی «عمومی» است. این سلکتور که با علامت ~ مشخص می شود و تمام خواهران و برادران عنصر مورد نظر را هدف قرار می دهد. به طور مثال، کد زیر تمام عناصر <p> را انتخاب می کند که با عنصر <div> برادر هستند:

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<p>Paragraph 1.</p>

<div>
  <code>Some code.</code>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که میبینید پاراگراف 4 برادر مستقیم عنصر div نیست اما باز هم هدف قرار گرفته است چرا که این سلکتور تمام برادران (چه مستقیم و چه غیر مستقیم) را انتخاب می کند.

Global Selector

سلکتور سراسری با علامت ستاره (*) مشخص می شود و کارش انتخاب تمام عناصر موجود در سند HTML است به طوری که هیچ عنصری را از قلم نمی اندازد. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
  <p id="firstname">My name is Donald.</p>
  <p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین می توانیم این دستور را با دستورات دیگر ترکیب کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
div * {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
  <p id="firstname">My name is Donald.</p>
  <p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در کد بالا از سلکتور اسپیس (نواده) و سلکتور سراسری استفاده کرده ایم.

سوال: آیا این سلکتور کاربرد عملی دارد؟

پاسخ: بله! یکی از مواردی که در آن ها از سلکتور سراسری استفاده می کنیم، کد های reset css هستند. این کد ها همه ی خصوصیات پیش فرض مرورگر ها در مورد padding و margin و ... را حذف می کنند و به شما اجازه می دهند تا کد های CSS را از نو و تازه بنویسید تا مطمئن شوید در تمام مرورگر ها به یک شکل نمایش داده می شود. البته اکثر کد های جدید reset در دنیای وب دیگر از این سلکتور استفاده نمی کنند و به صورت دستی تک تک موارد را تنظیم کرده اند.

Attribute Selectors

سلکتور های پیشرفته تری به نام سلکتور های attribute وجود دارند که کار آن ها هدف قرار دادن عناصر بر اساس attribute های یا مقادیر attribute هایشان است. ساختار این سلکتور ها که از سلکتور های قبلی پیشرفته تر هستند به صورت [attribute] است. به طور مثال در کد زیر می خواهیم تمام عناصر <a> ای که دارای attribute ای به نام target هستند را پیدا کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.roxo.ir">Roxo.ir</a> <br>
<a href="http://www.roxo.ir/plus" target="_blank">Roxo Plus</a> <br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>


<p dir='rtl'><b>هشدار:</b> خاصیت [<i>attribute</i>] در مرورگر internet explorer 8 و نسخه های قبل تر آن کار نمی کند مگر آنکه DOCTYPE را مشخص کرده باشید.</p>



</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که در خروجی مشاهده می کنید، عناصر را با استفاده از attribute هایشان هدف قرار داده ایم. به هر حال موضوع سلکتور های attribute طولانی تر از این حرف هاست به همین دلیل یک قسمت کامل (قسمت بعد) را به معرفی و کار با این دسته از سلکتورها اختصاص داده ایم. امیدوارم از این قسمت لذت برده باشید.