Attribute Selector و ترکیب Selectorها در CSS
بهنام نوبخت · ۱۴۰۵/۶/۲۸
تا اینجا با Selectorهای پایه مانند tag، class و id و همچنین Pseudo-Classها و Pseudo-Elementها آشنا شدیم. اما در پروژه‌های واقعی، گاهی انتخاب یک عنصر فقط بر اساس نام تگ یا کلاس کافی نیست. برای مثال ممکن است بخواهیم فقط فیلدهای ایمیل یک فرم را تغییر دهیم، فقط لینک‌هایی که در تب جدید باز می‌شوند را مشخص کنیم، یا فقط عناصری را انتخاب کنیم که یک Attribute خاص دارند.
در چنین شرایطی Attribute Selector به کمک ما می‌آید. علاوه بر آن، CSS به ما اجازه می‌دهد عناصر را بر اساس رابطه‌ای که با یکدیگر دارند انتخاب کنیم؛ مثلاً تمام pهای داخل یک بخش، فقط فرزندان مستقیم یک عنصر، یا پاراگرافی که بلافاصله بعد از یک عنوان قرار گرفته است.
در این مقاله ابتدا Attribute Selectorها را یاد می‌گیریم و سپس با Combinatorها آشنا می‌شویم تا بتوانیم Selectorهای دقیق‌تر و حرفه‌ای‌تری بنویسیم.
Attribute Selector چیست؟
در HTML، عناصر می‌توانند Attributeهای مختلفی داشته باشند:
<input type="text">
<input type="email" required>
<a href="https://example.com" target="_blank">مشاهده سایت</a>در CSS می‌توانیم به جای انتخاب عنصر بر اساس class یا id، آن را بر اساس وجود یا مقدار یک Attribute انتخاب کنیم.
ساختار ساده Attribute Selector به شکل زیر است:
[attribute] {
property: value;
}مثلاً:
input[required] {
border: 2px solid red;
}این Selector تمام inputهایی را انتخاب می‌کند که Attribute به نام required دارند.
Attribute Selectorها می‌توانند بر اساس وجود Attribute، مقدار دقیق آن یا حتی بخشی از مقدار آن عمل کنند.
انتخاب بر اساس وجود Attribute
ساده‌ترین نوع Attribute Selector فقط بررسی می‌کند که یک Attribute وجود داشته باشد.
[required] {
border-color: red;
}مثلاً:
<input type="text" required>
<input type="email">
<input type="password" required>در این مثال، دو فیلد اول و سوم که required دارند انتخاب می‌شوند.
می‌توانیم Selector را محدودتر کنیم:
input[required] {
border-color: red;
}در این حالت فقط inputهایی که required دارند انتخاب می‌شوند.
مثال کاربردی
input[disabled] {
background-color: #eee;
}این قانون تمام Inputهای غیرفعال را هدف قرار می‌دهد.
انتخاب بر اساس مقدار دقیق Attribute
اگر بخواهیم علاوه بر وجود Attribute، مقدار آن را نیز بررسی کنیم، از = استفاده می‌کنیم:
[attribute="value"] {
property: value;
}مثلاً:
input[type="email"] {
border-color: blue;
}HTML:
<input type="text">
<input type="email">
<input type="password">در اینجا فقط Input نوع email انتخاب می‌شود.
مثال‌های کاربردی
input[type="text"] {
background-color: #f5f5f5;
}input[type="password"] {
border-color: purple;
}button[type="submit"] {
cursor: pointer;
}این روش برای فرم‌ها بسیار کاربردی است.
انتخاب لینک‌های خاص
فرض کنید می‌خواهیم فقط لینک‌هایی را انتخاب کنیم که در تب جدید باز می‌شوند:
a[target="_blank"] {
color: orange;
}HTML:
<a href="/about">درباره ما</a>
<a href="https://example.com" target="_blank">
سایت خارجی
</a>فقط لینک دوم انتخاب خواهد شد.
مثال دیگر:
a[rel="noopener"] {
font-weight: bold;
}انتخاب بر اساس ابتدای مقدار Attribute
گاهی مقدار Attribute دقیقاً مشخص نیست، اما می‌دانیم مقدار آن با یک عبارت خاص شروع می‌شود.
برای این کار از ^= استفاده می‌کنیم:
[attribute^="value"] {
property: value;
}مثلاً:
a[href^="https://"] {
color: green;
}این Selector لینک‌هایی را انتخاب می‌کند که مقدار href آن‌ها با https:// شروع می‌شود.
مثلاً:
<a href="https://example.com">لینک اول</a>
<a href="https://google.com">لینک دوم</a>
<a href="/about">لینک سوم</a>دو لینک اول انتخاب می‌شوند.
انتخاب بر اساس انتهای مقدار Attribute
برای انتخاب عناصری که مقدار Attribute آن‌ها با یک عبارت مشخص تمام می‌شود، از $= استفاده می‌کنیم:
[attribute$="value"] {
property: value;
}مثلاً:
a[href$=".pdf"] {
color: red;
}این قانون لینک‌هایی را انتخاب می‌کند که به فایل PDF ختم می‌شوند.
<a href="/files/book.pdf">کتاب PDF</a>
<a href="/files/image.jpg">تصویر</a>
<a href="/files/report.pdf">گزارش PDF</a>لینک اول و سوم انتخاب می‌شوند.
مثال دیگر:
img[src$=".png"] {
border-radius: 10px;
}انتخاب بر اساس وجود یک عبارت در مقدار Attribute
با *= می‌توانیم بررسی کنیم که یک عبارت در هر قسمت از مقدار Attribute وجود داشته باشد.
[attribute*="value"] {
property: value;
}مثلاً:
a[href*="google"] {
color: blue;
}این Selector لینک‌هایی را انتخاب می‌کند که در مقدار href آن‌ها عبارت google وجود داشته باشد.
مثلاً:
<a href="https://google.com">Google</a>
<a href="https://google.com/search">Search</a>
<a href="https://example.com">Example</a>دو لینک اول انتخاب می‌شوند.
انتخاب یک کلمه مشخص در Attribute
Selector زیر:
[attribute~="value"]زمانی استفاده می‌شود که مقدار Attribute شامل یک مقدار جداشده با فاصله باشد.
برای مثال:
<div class="card featured">...</div>
<div class="card">...</div>
<div class="featured-box">...</div>می‌توان نوشت:
[class~="featured"] {
border: 2px solid orange;
}در این حالت عنصری که کلاس‌های card featured دارد انتخاب می‌شود، زیرا featured یکی از کلمات جداشده با فاصله در مقدار class است.
اما:
<div class="featured-box"></div>با [class~="featured"] انتخاب نمی‌شود.
انتخاب مقدار با پیشوند جداشده توسط خط تیره
نوع دیگری نیز وجود دارد:
[attribute|="value"]این حالت برای مقداری مناسب است که یا دقیقاً برابر با مقدار موردنظر باشد یا با آن مقدار و سپس یک - شروع شود.
برای مثال:
<div lang="fa"></div>
<div lang="fa-IR"></div>
<div lang="en"></div>می‌توان نوشت:
[lang|="fa"] {
font-family: sans-serif;
}در این حالت fa و fa-IR با Selector مطابقت دارند.
این نوع Selector در بعضی سناریوهای مربوط به کد زبان‌ها کاربرد دارد، اما در پروژه‌های روزمره کمتر از =، ^=، $= و *= استفاده می‌شود.
خلاصه Attribute Selectorها
Selector | مفهوم |
|---|---|
| Attribute وجود داشته باشد |
| مقدار دقیقاً برابر باشد |
| مقدار با عبارت شروع شود |
| مقدار با عبارت تمام شود |
| عبارت در مقدار وجود داشته باشد |
| یک کلمه مشخص در مقدار وجود داشته باشد |
`[attr | ="value"]` |
ترکیب Attribute Selector با Selectorهای دیگر
یکی از نقاط قوت CSS این است که می‌توانیم Selectorها را با یکدیگر ترکیب کنیم.
مثلاً:
input[type="email"][required] {
border-color: red;
}این Selector فقط Inputهایی را انتخاب می‌کند که:
inputباشند.type="email"داشته باشند.requiredداشته باشند.
مثلاً:
<input type="email" required>انتخاب می‌شود.
اما:
<input type="email">انتخاب نمی‌شود، چون required ندارد.
ترکیب Class و Attribute
می‌توانیم Class و Attribute را نیز با هم ترکیب کنیم:
input.form-control[type="email"] {
background-color: #f5f5f5;
}مثلاً:
<input class="form-control" type="email">انتخاب می‌شود.
اما:
<input class="form-control" type="text">انتخاب نمی‌شود.
این روش زمانی مفید است که بخواهیم انتخاب خود را دقیق‌تر کنیم.
تفاوت [class="box"] با .box
این نکته بسیار مهم است.
فرض کنید HTML زیر را داریم:
<div class="box">محتوا</div>هر دو Selector زیر آن را انتخاب می‌کنند:
.box {
padding: 20px;
}و:
[class="box"] {
padding: 20px;
}اما اگر HTML به شکل زیر تغییر کند:
<div class="box featured">محتوا</div>Selector زیر همچنان آن را انتخاب می‌کند:
.box {
padding: 20px;
}اما این Selector دیگر با مقدار دقیق box مطابقت ندارد:
[class="box"] {
padding: 20px;
}بنابراین برای انتخاب یک Class معمولی، بهتر است از:
.boxاستفاده کنیم.
و Attribute Selector را زمانی به کار ببریم که واقعاً می‌خواهیم بر اساس Attribute تصمیم بگیریم.
Attribute Selector در فرم‌ها
یکی از بهترین کاربردهای Attribute Selector، فرم‌ها است.
فرض کنید فرم زیر را داریم:
<form>
<input type="text" name="username" placeholder="نام کاربری">
<input type="email" name="email" placeholder="ایمیل">
<input type="password" name="password" placeholder="رمز عبور">
<input type="number" name="age" placeholder="سن">
<button type="submit">ثبت نام</button>
</form>می‌توانیم هر نوع Input را جداگانه طراحی کنیم:
input[type="text"] {
border-color: blue;
}
input[type="email"] {
border-color: green;
}
input[type="password"] {
border-color: purple;
}
input[type="number"] {
border-color: orange;
}همچنین:
input[required] {
background-color: #fff8f8;
}این قانون فقط فیلدهای دارای required را هدف قرار می‌دهد.
ترکیب Selectorها و روابط بین عناصر
تا اینجا Selectorها را بر اساس خود عنصر یا Attribute آن انتخاب کردیم.
اما گاهی لازم است بر اساس موقعیت یک عنصر نسبت به عنصر دیگر انتخاب کنیم.
برای این کار از Combinator استفاده می‌کنیم.
Combinatorها به ما اجازه می‌دهند بر اساس رابطه عناصر در ساختار HTML انتخاب دقیق‌تری داشته باشیم.
چهار مورد مهم برای این مرحله عبارت‌اند از:
فاصله یا Descendant
>یا Child+یا Next Sibling~یا Subsequent Sibling
Descendant Combinator
ساده‌ترین نوع، فاصله است:
.parent .childیعنی عنصر دوم باید درون عنصر اول قرار داشته باشد؛ مهم نیست چند سطح پایین‌تر باشد.
مثلاً:
<div class="card">
<h2>عنوان</h2>
<div>
<p>متن اول</p>
</div>
</div>می‌توان نوشت:
.card p {
color: blue;
}در این حالت p داخل .card انتخاب می‌شود، حتی اگر مستقیماً فرزند .card نباشد.
Descendant Selector می‌تواند عناصر موجود در هر سطح پایین‌تر از عنصر والد را انتخاب کند.
Child Combinator
اگر فقط فرزند مستقیم را بخواهیم، از > استفاده می‌کنیم:
.parent > .childمثلاً:
<div class="card">
<p>متن اول</p>
<div>
<p>متن دوم</p>
</div>
</div>اگر بنویسیم:
.card > p {
color: red;
}فقط p اول انتخاب می‌شود.
چرا؟
چون:
<div class="card">
<p>متن اول</p>
</div>p فرزند مستقیم .card است.
اما p دوم داخل یک div دیگر قرار دارد:
<div class="card">
<div>
<p>متن دوم</p>
</div>
</div>بنابراین فرزند مستقیم .card نیست.
تفاوت مهم:
.card pیعنی:
هر
pدرون.card
اما:
.card > pیعنی:
فقط
pهایی که مستقیماً فرزند.cardهستند.
Next Sibling Combinator
با + می‌توانیم عنصر بعدی و بلافاصله مجاور را انتخاب کنیم.
.element1 + .element2مثلاً:
<h2>عنوان</h2>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>اگر بنویسیم:
h2 + p {
color: red;
}فقط پاراگراف اول انتخاب می‌شود.
زیرا بلافاصله بعد از h2 قرار دارد.
اما پاراگراف دوم انتخاب نمی‌شود.
Next Sibling فقط عنصر بعدیِ بلافاصله مجاور را هدف قرار می‌دهد و دو عنصر باید یک والد مشترک داشته باشند.
Subsequent Sibling Combinator
اگر بخواهیم تمام عناصر هم‌سطحی را که بعد از یک عنصر قرار دارند انتخاب کنیم، از ~ استفاده می‌کنیم:
.element1 ~ .element2مثلاً:
<h2>عنوان</h2>
<p>پاراگراف اول</p>
<div>یک بخش دیگر</div>
<p>پاراگراف دوم</p>حالا:
h2 ~ p {
color: green;
}هر دو p انتخاب می‌شوند.
چون هر دو:
بعد از
h2قرار دارند.با
h2والد مشترک دارند.
برخلاف +، لازم نیست p بلافاصله بعد از h2 قرار گرفته باشد.
تفاوت چهار Combinator مهم
Selector | مفهوم |
|---|---|
| هر |
| فقط فرزند مستقیم |
| اولین |
| تمام |
برای درک بهتر، این ساختار را ببینید:
<section class="content">
<h2>عنوان</h2>
<p>پاراگراف اول</p>
<div>
<p>پاراگراف دوم</p>
</div>
<p>پاراگراف سوم</p>
</section>Selector اول
.content pهر سه p انتخاب می‌شوند.
Selector دوم
.content > pپاراگراف اول و سوم انتخاب می‌شوند.
پاراگراف دوم چون داخل div است، فرزند مستقیم .content نیست.
Selector سوم
h2 + pفقط پاراگراف اول انتخاب می‌شود.
Selector چهارم
h2 ~ pپاراگراف اول و سوم انتخاب می‌شوند، چون هر دو بعد از h2 و دارای والد مشترک هستند.
ترکیب Attribute Selector و Combinator
حالا می‌توانیم چند مفهوم را با هم ترکیب کنیم.
فرض کنید:
<nav class="menu">
<a href="/">خانه</a>
<a href="/products">محصولات</a>
<a href="https://example.com" target="_blank">سایت خارجی</a>
</nav>می‌توانیم فقط لینک‌های خارجی را انتخاب کنیم:
.menu a[target="_blank"] {
color: orange;
}در این Selector:
.menuبخش والد است.
aعنصر موردنظر است.
[target="_blank"]شرط Attribute است.
مثال ترکیبی دیگر
فرض کنید:
<form class="register-form">
<div class="field">
<label>نام</label>
<input type="text" required>
</div>
<div class="field">
<label>ایمیل</label>
<input type="email" required>
</div>
</form>می‌توانیم فقط Inputهای ایمیل را انتخاب کنیم:
.register-form input[type="email"] {
border-color: green;
}و فقط Inputهای اجباری را:
.register-form input[required] {
background-color: #fff8f8;
}یا حتی:
.register-form > .field {
margin-bottom: 20px;
}در اینجا .fieldها باید فرزند مستقیم .register-form باشند.
یک پروژه عملی کوچک
حالا یک فرم و منوی ساده طراحی کنیم که از Attribute Selector و Combinator استفاده کند.
HTML
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Selector</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="menu">
<a href="/">خانه</a>
<a href="/courses">دوره‌ها</a>
<a href="/contact">تماس با ما</a>
<a href="https://example.com" target="_blank">سایت خارجی</a>
</nav>
<main class="container">
<h1>ثبت نام</h1>
<p>لطفاً اطلاعات خود را وارد کنید.</p>
<form class="register-form">
<div class="field">
<label for="username">نام کاربری</label>
<input
id="username"
type="text"
name="username"
required
>
</div>
<div class="field">
<label for="email">ایمیل</label>
<input
id="email"
type="email"
name="email"
required
>
</div>
<div class="field">
<label for="password">رمز عبور</label>
<input
id="password"
type="password"
name="password"
required
>
</div>
<button type="submit">
ثبت نام
</button>
</form>
</main>
</body>
</html>CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background-color: #f5f5f5;
}
.menu {
padding: 20px;
background-color: #222;
}
.menu a {
margin-left: 20px;
color: white;
text-decoration: none;
}
.menu a[target="_blank"] {
color: orange;
}
.container {
width: 90%;
max-width: 600px;
margin: 40px auto;
}
.container > h1 {
margin-bottom: 10px;
}
h1 + p {
color: #666;
margin-bottom: 30px;
}
.register-form {
padding: 25px;
background-color: white;
border-radius: 12px;
}
.register-form > .field {
margin-bottom: 20px;
}
.field label {
display: block;
margin-bottom: 8px;
}
.field input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
}
.field input[required] {
background-color: #fffaf0;
}
.field input[type="email"] {
border-color: #28a745;
}
.field input[type="password"] {
border-color: #6f42c1;
}
.register-form button[type="submit"] {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
cursor: pointer;
}در این مثال چند نوع Selector را همزمان استفاده کردیم:
.menu aبرای انتخاب لینک‌های داخل منو.
.menu a[target="_blank"]برای انتخاب لینک‌های خارجی.
.container > h1برای انتخاب عنوانی که فرزند مستقیم container است.
h1 + pبرای انتخاب پاراگراف بلافاصله بعد از عنوان.
.field input[required]برای انتخاب Inputهای دارای required.
.field input[type="email"]برای انتخاب Inputهای ایمیل.
این دقیقاً همان چیزی است که Selectorهای ترکیبی را قدرتمند می‌کند: می‌توانیم انتخاب خود را مرحله‌به‌مرحله دقیق‌تر کنیم.
آیا باید Selectorهای بسیار پیچیده بنویسیم؟
خیر.
مثلاً این Selector:
main.container form.register-form div.field input.form-control[type="email"][required]ممکن است کار کند، اما بیش از حد پیچیده است.
در بسیاری از موارد می‌توانیم آن را ساده‌تر بنویسیم:
input[type="email"][required] {
...
}یا:
.register-form input[type="email"] {
...
}هدف Selector این نیست که هرچه طولانی‌تر باشد؛ هدف این است که به اندازه کافی دقیق و قابل نگهداری باشد.
اشتباه رایج: فاصله در Selector
این دو Selector کاملاً متفاوت هستند:
.card .titleو:
.card.titleاولی یعنی:
عنصری با کلاس
titleکه داخل عنصری با کلاسcardقرار دارد.
دومی یعنی:
یک عنصر که همزمان کلاس
cardوtitleرا دارد.
مثلاً:
<div class="card">
<h2 class="title">عنوان</h2>
</div>با این Selector انتخاب می‌شود:
.card .titleاما با این Selector انتخاب نمی‌شود:
.card.titleچون card و title روی یک عنصر نیستند.
اشتباه رایج: اشتباه گرفتن + و ~
این:
h2 + pفقط p بلافاصله بعد از h2 را انتخاب می‌کند.
اما:
h2 ~ pتمام pهای بعد از h2 را که با آن والد مشترک دارند انتخاب می‌کند.
پس:
+ → فقط همسایه بعدی
~ → تمام همسایه‌های بعدیاشتباه رایج: استفاده نادرست از >
این:
.card > pفقط فرزند مستقیم را انتخاب می‌کند.
اگر HTML این باشد:
<div class="card">
<div>
<p>متن</p>
</div>
</div>p توسط این Selector انتخاب نمی‌شود:
.card > pاما با این انتخاب می‌شود:
.card pچون p در نهایت داخل .card قرار دارد.
اشتباه رایج: استفاده از [class="..."] برای Classهای معمولی
اگر می‌خواهیم عناصر دارای یک کلاس خاص را انتخاب کنیم، معمولاً بهتر است بنویسیم:
.cardنه:
[class="card"]چون یک عنصر ممکن است چند Class داشته باشد:
<div class="card featured large">در چنین شرایطی:
.cardهمچنان درست عمل می‌کند.
Attribute Selector یا Class؟
سؤال مهمی که ممکن است پیش بیاید این است:
چه زمانی از Attribute Selector استفاده کنیم و چه زمانی Class؟
هر دو ابزار مفید هستند، اما کاربردشان متفاوت است.
Class
برای طراحی و ایجاد نقش بصری یا ساختاری بسیار مناسب است:
<div class="card"></div>.card {
padding: 20px;
}Attribute Selector
زمانی بسیار مفید است که بخواهیم بر اساس یک ویژگی واقعی عنصر تصمیم بگیریم:
input[type="email"] {
...
}در اینجا type="email" واقعاً بخشی از معنای HTML عنصر است.
پس معمولاً بهتر است:
input[type="email"]را برای انتخاب Inputهای ایمیل استفاده کنیم، به جای اینکه فقط برای CSS یک کلاس اضافی مانند:
<input class="email-input" type="email">اضافه کنیم.
البته در پروژه‌های بزرگ، استفاده از Classهای مشخص برای طراحی نیز کاملاً طبیعی و رایج است.
استفاده از Data Attribute
در HTML می‌توان Attributeهایی با نام data-* ایجاد کرد:
<div data-category="course">
دوره طراحی وب
</div>
<div data-category="product">
محصول
</div>
بعد در CSS می‌توانیم آن‌ها را انتخاب کنیم:
[data-category="course"] {
border: 2px solid blue;
}
[data-category="product"] {
border: 2px solid green;
}Data Attributeها در HTML برای نگهداری داده‌های سفارشی کاربرد دارند و CSS نیز می‌تواند بر اساس آن‌ها عناصر را انتخاب کند.
نکته مهم درباره پیچیدگی Selectorها
با یادگیری Selectorهای بیشتر، ممکن است وسوسه شویم همه آن‌ها را با هم ترکیب کنیم.
مثلاً:
main > section.card[data-type="course"] article:first-child p strong {
...
}اما همیشه Selector پیچیده بهتر نیست.
یک Selector خوب باید:
قابل فهم باشد.
هدف مشخصی داشته باشد.
بیش از حد به ساختار HTML وابسته نباشد.
نگهداری آن ساده باشد.
فقط به اندازه لازم دقیق باشد.
این موضوع در پروژه‌های بزرگ اهمیت بسیار بیشتری پیدا می‌کند.
تمرین‌های مقاله
تمرین ۱ — Attribute Selector
HTML زیر را در نظر بگیرید:
<input type="text">
<input type="email">
<input type="password">
<input type="number">یک Selector بنویسید که فقط Inputهای email را انتخاب کند.
تمرین ۲ — Required
برای HTML زیر:
<input type="text" required>
<input type="email">
<input type="password" required>یک Selector بنویسید که تمام Inputهای دارای required را انتخاب کند.
تمرین ۳ — لینک‌های خارجی
HTML:
<a href="/about">درباره ما</a>
<a href="https://example.com" target="_blank">سایت خارجی</a>
<a href="/contact">تماس</a>فقط لینک دارای target="_blank" را با رنگ نارنجی نمایش دهید.
تمرین ۴ — Descendant
HTML زیر را در نظر بگیرید:
<div class="box">
<p>متن اول</p>
<div>
<p>متن دوم</p>
</div>
</div>یک Selector بنویسید که هر دو p را انتخاب کند.
تمرین ۵ — Child
با همان HTML، Selectorی بنویسید که فقط p اول را انتخاب کند.
تمرین ۶ — Sibling
HTML:
<h2>عنوان</h2>
<p>پاراگراف اول</p>
<div>بخش دیگر</div>
<p>پاراگراف دوم</p>دو Selector بنویسید:
فقط پاراگراف اول.
هر دو پاراگراف.
جمع‌بندی
در این مقاله یاد گرفتیم که CSS فقط به Selectorهای ساده‌ای مانند class و id محدود نمی‌شود. با Attribute Selectorها می‌توانیم عناصر را بر اساس Attribute و مقدار آن‌ها انتخاب کنیم؛ برای مثال فقط Inputهای ایمیل، لینک‌های دارای target="_blank" یا عناصر دارای required.
همچنین با Combinatorها یاد گرفتیم که می‌توانیم عناصر را بر اساس رابطه آن‌ها در ساختار HTML انتخاب کنیم. فاصله برای انتخاب عناصر داخلی، > برای فرزند مستقیم، + برای عنصر بلافاصله بعدی و ~ برای عناصر هم‌سطح بعدی استفاده می‌شود.
این ابزارها به ما اجازه می‌دهند بدون اضافه کردن Classهای غیرضروری، انتخاب‌های دقیق‌تری در CSS داشته باشیم. البته قدرت بیشتر به معنی Selectorهای پیچیده‌تر نیست؛ در یک پروژه حرفه‌ای باید همیشه بین دقت، خوانایی و قابلیت نگهداری تعادل برقرار کنیم.
تا اینجا تقریباً تمام ابزارهای مهم برای انتخاب عناصر را بررسی کرده‌ایم. در مقاله بعدی وارد یکی از مهم‌ترین مباحث CSS می‌شویم: اینکه وقتی چند قانون CSS همزمان روی یک عنصر اعمال می‌شوند، کدام قانون برنده می‌شود؟
نظرات
هنوز نظری ثبت نشده است.