با ترکیب نام تگ‌ها و نشانه‌های رابطه، می‌توانید عناصر را بر اساس جایگاهشان در ساختار HTML انتخاب کنید. در این روش، تفاوت میان فاصله، علامت بزرگ‌تر و علامت به‌علاوه مهم است؛ هر کدام رابطه متفاوتی میان عناصر را نشان میدهد.
انتخاب چند نوع عنصر با ویرگول
ویرگول برای گروه‌بندی چند انتخابگر مستقل استفاده میشود. در نمونه زیر، قانون روی همه عناصر h1 و همه پاراگرافهای p اعمال میشود؛ لازم نیست این عناصر در یک بخش مشترک قرار داشته باشند.
h1, p {
background-color: yellow;
}
این انتخابگر زمانی به کار می‌آید که چند نوع عنصر باید یک ظاهر مشترک داشته باشند. برای آشنایی با عنوان‌های HTML می‌توانید مطلب تگ عناوين H1 - H6 را مطالعه کنید.
انتخاب عنصرهای داخل یک عنصر دیگر
فاصله میان دو انتخابگر به معنی انتخاب عنصرهای درون‌رفته است. بنابراین div p همه پاراگراف‌هایی را پیدا میکند که درون یک div قرار دارند؛ فرقی ندارد پاراگراف فرزند مستقیم باشد یا درون یک عنصر دیگر قرار گرفته باشد.
div p {
background-color: yellow;
}
برای مثال، اگر بخواهید پاراگرافهای داخل یک بخش مشخص را از پاراگرافهای بیرون آن متمایز کنید، انتخابگر فرزند درون‌رفته می‌تواند مفید باشد. آشنایی با تگ <div> در درک این ساختار کمک میکند.
انتخاب فرزند مستقیم
علامت > فقط فرزندهای مستقیم عنصر سمت چپ را انتخاب میکند. پس div > p پاراگراف‌هایی را هدف میگیرد که والد مستقیم آن‌ها div باشد؛ پاراگرافی که درون یک عنصر واسطه قرار دارد انتخاب نمی‌شود.
div > p {
background-color: yellow;
}
این تفاوت زمانی اهمیت دارد که ساختار صفحه چند لایه باشد. اگر می‌خواهید فقط یک سطح از محتوا را استایل‌دهی کنید، انتخابگر فرزند مستقیم محدوده را محدودتر از انتخابگر درون‌رفته نگه می‌دارد.
انتخاب همسایه بلافاصله بعدی
علامت + عنصر همسطحی را انتخاب میکند که بلافاصله بعد از عنصر اول آمده باشد. به همین دلیل، div + p پاراگرافی را انتخاب میکند که هم‌سطح با div است و درست پس از آن قرار میگیرد؛ این قانون همه پاراگرافهای بعدی را انتخاب نمی‌کند.
div + p {
background-color: yellow;
}
برای نمونه، می‌توانید ظاهر اولین پاراگراف بعد از یک بخش را تغییر دهید، بدون اینکه پاراگرافهای بعدی همان بخش هم تحت تاثیر قرار بگیرند. اگر بین دو عنصر، عنصر هم‌سطح دیگری قرار بگیرد، این انتخابگر دیگر پاراگراف مورد نظر را پیدا نمی‌کند.