برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
انتخابگرهای نهایی که ما به آنها نگاه خواهیم کرد، ترکیب کننده نامیده می شوند، زیرا آنها انتخابگرهای دیگر را به گونه ای ترکیب می کنند که به آنها ارتباط مفیدی با یکدیگر و مکان محتوا در سند می دهد.
پیش نیازها: سواد اولیه کامپیوتر، نرم افزار پایه نصب شده، دانش اولیه کار با فایل ها، مبانی HTML (مقدمه ای بر HTML) و ایده ای از نحوه کار CSS (مطالعه مراحل اولیه CSS.)
هدف: یادگیری در مورد انتخابگرهای ترکیبی مختلف که می توانند در CSS استفاده شوند.
ترکیب‌کننده Descendant که معمولاً با یک کاراکتر فاصله (” “) نشان داده می‌شود ، دو انتخابگر را ترکیب می‌کند به طوری که عناصری که با انتخابگر دوم مطابقت دارند انتخاب می‌شوند اگر یک عنصر ancestor منطبق با آن داشته باشند، انتخاب شوند. انتخابگر اولِ انتخابگرهایی که از ترکیب کننده نزول استفاده می کنند، انتخابگرهای descendant نامیده می شوند.
و با استفاده از طراحان گرافیک است.
ترکیب کننده Child
ترکیب کننده Child (<) بین دو انتخابگر CSS قرار می گیرد. فقط با عناصری مطابقت دارد که توسط انتخابگر دوم مطابقت دارند که direct children عناصر منطبق با اولی هستند. عناصر Descendant در سلسله مراتب با هم مطابقت ندارند. به عنوان مثال، برای انتخاب فقط عناصر <p> که direct children عناصر <article> هستند:
در این مثال بعدی، ما یک لیست نامرتب داریم که در داخل آن یک لیست مرتب وجود دارد. ترکیب‌کننده Child فقط عناصر <li> را انتخاب می‌کند که direct children یک <ul> هستند، و آنها را با حاشیه بالایی استایل می‌کند.اگر < را که به‌عنوان ترکیب‌کننده Child تعیین می‌کند حذف کنید، در نهایت با یک انتخابگر نزول مواجه می‌شوید و همه عناصر <li> یک حاشیه قرمز دریافت می‌کنند.
ترکیب کننده sibling مجاور (+) بین دو انتخابگر CSS قرار می گیرد. فقط با عناصری مطابقت دارد که با انتخابگر دوم مطابقت دارند که عنصر sibling بعدی انتخابگر اول هستند. به عنوان مثال، برای انتخاب همه عناصر <img> که بلافاصله قبل از آنها یک عنصر <p> وجود دارد:
یک مورد معمول استفاده، انجام کاری با پاراگرافی است که از یک عنوان پیروی می کند، مانند مثال زیر. در آن مثال، ما به دنبال هر پاراگرافی هستیم که یک عنصر والد را با یک <h1> به اشتراک بگذارد، و بلافاصله از آن <h1> پیروی کند.
اگر عنصر دیگری مانند <h2> را بین <h1> و <p> وارد کنید، متوجه می‌شوید که پاراگراف دیگر با انتخابگر مطابقت ندارد و بنابراین رنگ پس‌زمینه و پیش‌زمینه اعمال نمی‌شود هنگامی که عنصر مجاور است.
ژنرال ترکیب کننده sibling
اگر می‌خواهید sibling های یک عنصر را انتخاب کنید، حتی اگر مستقیماً مجاور نباشند، می‌توانید از ترکیب‌کننده sibling عمومی (~) استفاده کنید. برای انتخاب تمام عناصر <img> که در هر جایی بعد از عناصر <p> قرار می گیرند، این کار را انجام می دهیم:
در مثال زیر، ما تمام عناصر <p> را بعد از <h1> می آیند انتخاب می کنیم، و حتی اگر یک <div> در سند نیز وجود دارد، <p> که بعد از آن می آید انتخاب می شود.
می‌توانید هر یک از انتخاب‌کننده‌هایی را که در درس‌های قبلی کشف کردیم، با ترکیب‌کننده‌ها ترکیب کنید تا بخشی از سند خود را انتخاب کنید. به عنوان مثال، برای انتخاب آیتم های لیست با کلاس “a” که فرزندان مستقیم یک <ul> هستند، موارد زیر را امتحان کنید:
با این حال، هنگام ایجاد لیست های بزرگ از انتخابگرهایی که بخش های بسیار خاصی از سند شما را انتخاب می کنند، مراقب باشید. استفاده مجدد از قوانین CSS دشوار خواهد بود زیرا انتخابگر را برای مکان آن عنصر در نشانه گذاری بسیار خاص ساخته اید.
اغلب بهتر است یک کلاس ساده ایجاد کنید و آن را در عنصر مورد نظر اعمال کنید. با این اوصاف، دانش شما از ترکیب‌کننده‌ها بسیار مفید خواهد بود اگر بخواهید چیزی را در سند خود استایل کنید و نتوانید به HTML دسترسی داشته باشید، شاید به دلیل ایجاد آن توسط یک CMS.
در پایان
شما به پایان این مقاله رسیده اید، اما آیا می توانید مهمترین اطلاعات را به خاطر بسپارید؟ می‌توانید آزمایش‌های بیشتری برای تأیید اینکه این اطلاعات را قبل از ادامه کار حفظ کرده‌اید پیدا کنید به تست مهارت‌های خود مراجعه کنید.
این آخرین بخش در درس های ما در مورد انتخابگرها است. در مرحله بعد، به بخش مهم دیگری از CSS یعنی cascade, specificity و inheritance خواهیم پرداخت.
با تشکر از تمامی شما عزیزان که کیهان وب را دنبال میکنید .