Basic Selectors element، class و ID که ۹۰% کار رو راه می‌ندازن

عناصر رو سلکت نمی‌کنی؟ basic selectors ۹۰% کارت رو راه می‌ندازه! Element Selectorهمه tag های مشابه:

/* همه heading ها */
h1,h2,h3 {
  color:blue;
}

Class Selectorگروه‌بندی عناصر :(class)

<div class="card">کارت ۱</div>
<div class="card">کارت ۲</div>

.card {
  border:1px solid #ccc;
  padding:20px;
}

:ID Selector : unique element (#id)

<button id="submit-btn">ارسال</button>

#submit-btn {
  background:red;
  color:white;
}

نکته طلایی class رو اولویت بده، ID فقط !✨form submit

سلکتورهای پیشرفته CSS :hover،nth-child و attribute

hover و جدول‌ها خسته‌ت کرد؟ advanced selector ها pro می‌کنه!

nth-childردیف‌های متفاوت:

/* ردیف فرد خاکستری */
li:nth-child(odd) {background:#f5f5f5;}
/* اولین item bold */
li:first-child {font-weight:bold;}

Hoverکلیک قبل تغییر:

button:hover {background:blue;color:white;}
.card:hover {transform:scale(1.02);}

Attribute :input ها رو جدا

input[type="email"] {border-left:4px solid green;}
input[required] {border-color:red;}

CSS Selectors پیشرفته layout رو زنده می‌کنه: • جدول zebra • دکمه interactive • فرم validation

سلکتورهای رابطه ای در : CSS بچه و همسایه با >,+,~

عناصر parent-child رو نمی‌تونی target کنی؟😤 combinators layout رو master می‌کنه! HTML مثال واقعی:

<nav>
  <ul class="menu">
    <li>خانه</li>
    <li>درباره <ul><li>زیرمنو</li></ul></li>
    <li>تماس</li>
  </ul>
</nav>
<p>متن بعد منو</p>

:Child Combinator (>)فقط direct child

menu>li { /* فقط li های مستقیم */
  padding:10px;
}
/* زیرمنو target نمی‌شه */
:Adjacent Sibling (+)  بلافاصله بعدش
li+li { /* li دوم که بعد li اوله */
  border-top:2px solid #ccc;
}
:General Sibling (~) همه sibling های بعد
li~li { /* همه li های بعد از اولین */
  background:#f9f9f9;
}
p~p { /* پاراگراف‌های بعد از اولین */
  margin-top:20px;
}

حالا دیگه می‌دونی CSS Selectors چیست و چطور با selector های ساده مثل element،class و ID شروع کنی و بعد با hover، nth-child و selector های رابطه ای مثل >,+,~ دقیق تر استایل بدی.✅ اگر یه نکته رو یادت بمونه کافیه:اول درست target کن،بعد استایل بده!🎯 از همین امروز تو پروژه‌هات selector ها رو مرحله به مرحله تمرین کن تا هم کدت تمیزتر بشه، هم سریع تر به نتیجه برسی.🚀