Combinator در CSS — آموزش CSS (بخش دهم)

آخرین دسته از سلکتورها که در این سری مقالات آموزش CSS مورد بررسی قرار می‌دهیم، شامل کامبیناتورها است. دلیل نام گذاری آن‌ها این است که سلکتورها را به ترتیب با هم ترکیب (Combination) می‌کنند که رابطه مفیدی با همدیگر و با مکان محتوا در سند ایجاد می‌کنند. بدین ترتیب در این مقاله در مورد سکتورهای Combinator در CSS صحبت خواهیم کرد. برای مطالعه بخش قبلی از این مجموعه مقالات آموزشی روی لینک زیر کلیک کنید:

• شبه کلاس و شبه عنصر در CSS — آموزش CSS (بخش نهم)

سلکتور Descendant

در بخش‌های قبلی این سری مقالات با سلکتور Descendant مواجه شده‌ایم.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

این‌ها سلکتورهایی هستند که بینشان فاصله وجود دارد:

1body article p

این سلکتورها عناصری را انتخاب می‌کنند که فرزندان سلکتورهای دیگر هستند. البته لزومی نیست که مستقیم فرزند دیگری باشند تا تطبیق پیدا کنند. در مثال زیر ما تنها عنصر <p> را تطبیق می‌دهیم که درون یک عنصر با کلاس ‎.box قرار دارد.

1.box p {
2    color: red;
3}

1<div class="box"><p>Text in .box</p></div>
2<p>Text not in .box</p>

کامبیناتور فرزند (Child Combinator)

کامبیناتور فرزند به شکل علامت بزرگ‌تر (<) است و صرفاً وقتی تطبیق می‌یابد که سلکتورها عنصری را انتخاب کنند که فرزند مستقیم عنصر دیگر باشند. فرزندِ فرزند (شامل نوه، نتیجه و غیره) هر مقدار که در سلسله‌مراتب پایین‌تر می‌روند، در این حالت تطبیق نمی‌یابند. برای نمونه برای انتخاب صرف عنصر <p> که فرزند مستقیم عناصر <article> است از سلکتور کامبیناتور فرزند زیر استفاده می‌کنیم:

1article > p

در مثال بعدی یک لیست مرتب داریم که درون یک لیست نامرتب دیگر به صورت تودرتو قرار گرفته است. از کامبیناتور فرزند برای انتخاب تنها عناصر <li> که فرزند مستقیم <ul> هستند، استفاده می‌کنیم و یک حاشیه فوقانی به آن‌ها می‌دهیم.

اگر علامت > را که این سلکتور را به عنوان کامبیناتور child تعیین می‌کند حذف کنید، در نهایت سلکتور descendant به دست می‌آید و همه عناصر <li> حاشیه قرمز رنگ می‌یابند.

1ul > li {
2    border-top: 5px solid red;
3}  

1<ul>
2    <li>Unordered item</li>
3    <li>Unordered item
4        <ol>
5            <li>Item 1</li>
6            <li>Item 2</li>
7        </ol>
8    </li>
9</ul>

هم‌نیای مجاور

سلکتور «هم‌نیای مجاور» (adjacent sibling) با علامت بعلاوه (+) برای انتخاب چیزی که در مجاورت بلافصل عنصر دیگر در همان سطح قرار دارد استفاده می‌شود. برای نمونه برای انتخاب همه عناصر <img> که درست پس از عناصر <p> می‌آیند، می‌توان از سلکتور فوق به صورت زیر استفاده کرد:

1p + img

یک کاربرد رایج این سلکتور آن است که کاری را روی پاراگرافی که پس از یک عنوان می‌آید انجام دهیم. در ادامه مثالی از آن ارائه شده است. در این مثال به دنبال پاراگرافی می‌گردیم که مستقیماً در کنار یک <h1> قرار دارد و آن را استایل‌بندی می‌کنیم.

اگر عنصر دیگری مانند <h2> را بین <h1> و <p> قرار دهید، متوجه خواهید شد که پاراگراف دیگر از سوی سلکتور تطبیق نمی‌یابد و از این رو رنگ‌های پس‌زمینه و پیش‌زمینه قبلی را به دست نمی‌آورند.

1h1 + p {
2    font-weight: bold;
3    background-color: #333;
4    color: #fff;
5    padding: .5em;
6}

1<article>
2    <h1>A heading</h1>
3    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
4            melon azuki bean garlic.</p>
5
6    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
7            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
8</article>

هم‌نیای کلی

اگر می‌خواهید همه هم‌نیاهای یک عنصر را حتی در صورتی که در مجاورت مستقیم عنصر نباشند انتخاب کنید، می‌توانید از کامبیناتور «هم‌نیای کلی» (general sibling combinator) با علامت ~ استفاده کنید. برای انتخاب همه عناصر <img> که هر جایی پس از عنصر <p> می‌آیند، به صورت زیر عمل می‌کنیم:

1p ~ img

در مثال فوق، همه عناصر <p> را که پس از <h1> می‌آیند و حتی آن‌هایی که درون یک <div> قرار دارند را انتخاب می‌کنیم:

1h1 ~ p {
2    font-weight: bold;
3    background-color: #333;
4    color: #fff;
5    padding: .5em;
6}

1<article>
2    <h1>A heading</h1>
3    <p>I am a paragraph.</p>
4    <div>I am a div</div>
5    <p>I am another paragraph.</p>
6</article>

استفاده از کامبیناتورها

شما می‌توانید هر کدام از سلکتورهایی را که در بخش‌های قبلی این سری مقالات دیدیم با کامبیناتورها ترکیب کنید تا بخش خاصی از سند را که در نظر دارید انتخاب کنید. برای نمونه اگر می‌خواهید آیتم‌های لیست را که دارای کلاس a و فرزند مستقیم یک <ul> هستند، انتخاب کنید می‌توانید از کد زیر بهره بگیرید:

1ul > li[class="a"] { }

با این حال باید در مورد ایجاد لیستی طولانی از سلکتورها که تنها بخش‌های خاصی از سند را انتخاب می‌کنند، دقت ویژه‌ای داشته باشید، زیرا استفاده مجدد از این قواعد CSS در حالتی که در مورد موقعیت عنصر در markup بسیار تخصصی عمل کنید، دشوار می‌شود.

در اغلب موارد بهتر است که یک کلاس ساده ایجاد کرده و روی عنصر مورد نظر اعمال کنید. معنی این حرف آن است که دانش شما از کامبیناتورها در صورتی مفید خواهد بود که بخواهید در صورت عدم دسترسی به HTML به بخش خاصی از سند دسترسی پیدا کنید. این حالت در زمان استفاده از CMS-ها بیشتر مشاهده می‌شود.

سخن پایانی

این مقاله آخرین قسمت از بخش سلکتورهای سلسله مقالات آموزش CSS در مجله فرادرس است در قسمت بعدی در مورد بخش دیگری از CSS یعنی مدل جعبه‌ای (Box Model) صحبت خواهیم کرد.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای مطالعه بخش بعدی از این مجموعه مقالات آموزشی روی لینک زیر کلیک کنید:

• مدل جعبه ای (box model) در CSS — آموزش CSS (بخش یازدهم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش طراحی وب با CSS
• مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
• ایجاد شکل‌های زیبا با CSS — از صفر تا صد

==