آموزش کامل سلکتور :has() در CSS | والد بر اساس فرزند + ۲۰ مثال جادویی

.card:has(img) {    border: 3px solid gold;    box-shadow: 0 5px 20px rgba(0,0,0,0.2);  }  .card:not(:has(img)) {    border: 1px solid #ddd;    opacity: 0.7;  }

<div class="card">    <img src="photo.jpg">    <p>این کارت تصویر دارد → حاشیه طلایی</p>  </div>  <div class="card">    <p>این کارت تصویر ندارد → حاشیه ساده</p>  </div>

.form-group:has(input:invalid) {    border-left: 4px solid #e74c3c;    background-color: #ffe6e6;    padding-left: 10px;  }  .form-group:has(input:valid) {    border-left: 4px solid #2ecc71;  }  input:required:invalid {    border-color: #e74c3c;  }  input:required:valid {    border-color: #2ecc71;  }

<div class="form-group">    <label>ایمیل (اجباری)</label>    <input type="email" required>    <!-- اگر ایمیل نامعتبر باشد، این div هایلایت می‌شود -->  </div>

form:has(input:invalid, textarea:invalid) {    background-color: #fff0f0;    border: 2px solid #e74c3c;    padding: 20px;    border-radius: 12px;  }  form:has(input:valid, textarea:valid) {    background-color: #f0fff0;    border: 2px solid #2ecc71;  }

.error-message {    display: none;    color: #e74c3c;    font-size: 12px;    margin-top: 5px;  }  .input-group:has(input:invalid) .error-message {    display: block;  }  .input-group:has(input:valid) .error-message {    display: none;  }

<div class="input-group">    <input type="email" required>    <div class="error-message">لطفا ایمیل معتبر وارد کنید</div>  </div>

.product-card:has(.discount-badge) {    background: linear-gradient(135deg, #fff5e6, #ffe6cc);    border: 2px solid #f39c12;    transform: scale(1.02);  }  .discount-badge {    background: #e74c3c;    color: white;    padding: 5px 10px;    border-radius: 20px;    font-size: 12px;  }

/* پنهان کردن رادیو باتن‌ها */  .filter-input {    display: none;  }  /* نمایش همه تصاویر به صورت پیش‌فرض */  .gallery-item {    display: block;  }  /* فیلتر بر اساس مقدار رادیو باتن */  #filter-all:checked ~ .gallery:has(.gallery-item) {    /* همه را نشان بده */  }  #filter-cat:checked ~ .gallery .gallery-item:not(:has(img[data-category="cat"])) {    display: none;  }  #filter-dog:checked ~ .gallery .gallery-item:not(:has(img[data-category="dog"])) {    display: none;  }

<input type="radio" name="filter" id="filter-all" checked> <label for="filter-all">همه</label>  <input type="radio" name="filter" id="filter-cat"> <label for="filter-cat">گربه</label>  <input type="radio" name="filter" id="filter-dog"> <label for="filter-dog">سگ</label>  <div class="gallery">    <div class="gallery-item"><img data-category="cat" src="cat1.jpg"></div>    <div class="gallery-item"><img data-category="dog" src="dog1.jpg"></div>  </div>

.nav-menu:has(a.active) {    background-color: #3498db;    border-radius: 10px;  }  .nav-menu a.active {    color: white;    font-weight: bold;  }  .nav-menu:has(a.active)::before {    content: "⭐ فعال ";    color: gold;  }

tr:has(td.status-paid) {    background-color: #d4edda;    color: #155724;  }  tr:has(td.status-pending) {    background-color: #fff3cd;    color: #856404;  }  tr:has(td.status-canceled) {    background-color: #f8d7da;    color: #721c24;  }

.list-container:has(li:nth-child(6)) {    max-height: 200px;    overflow-y: auto;    border: 1px solid #ddd;  }

.comment:has(a) {    background-color: #e8f4f8;    border-left: 4px solid #3498db;  }  .comment:has(a[href^="https://spam.com"]) {    background-color: #ffcccc;    display: none; /* مخفی کردن کامنت اسپم */  }

.form-container:has(input:placeholder-shown) button[type="submit"] {    opacity: 0.5;    pointer-events: none;  }  .form-container:not(:has(input:placeholder-shown)) button[type="submit"] {    opacity: 1;    pointer-events: auto;  }

.blog-post:has(.featured-image) {    grid-column: span 2;    background: linear-gradient(135deg, #667eea, #764ba2);    color: white;  }  .blog-post:not(:has(.featured-image)) {    background: #f8f9fa;  }

.sidebar:has(.weather-widget) {    width: 300px;  }  .sidebar:has(.ad-banner) {    background-color: #fff9e6;  }

.comment-thread:has(.admin-reply) {    background-color: #f0f7ff;    border: 2px solid #3498db;    border-radius: 12px;    padding: 15px;  }  .admin-reply {    background-color: #e8f4f8;    margin-left: 30px;    padding: 10px;    border-radius: 8px;  }

.product-card:has(.buy-button) {    box-shadow: 0 10px 30px rgba(0,0,0,0.15);  }  .product-card:not(:has(.buy-button)) {    opacity: 0.5;    filter: grayscale(0.5);  }

.search-container:has(input[value=""]) .results {    display: none;  }  .search-container:has(input[value]:not([value=""])) .results {    display: block;  }

.header:has(.user-avatar) {    background-color: #2c3e50;  }  .header:not(:has(.user-avatar)) {    background-color: #e74c3c;  }  .header:has(.user-avatar) .login-btn {    display: none;  }  .header:has(.user-avatar) .user-menu {    display: block;  }

/* انتخاب divهایی که حداقل 3 تا p دارند */  div:has(p:nth-child(3)) {    background-color: #ffe6cc;  }  /* انتخاب divهایی که دقیقاً 1 تا p دارند */  div:has(p:only-child) {    border: 2px dashed #3498db;  }

/* divهایی که داخلشان span است و آن span داخلش img دارد */  .container:has(span:has(img)) {    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);    color: white;  }

/* کارتی که هم تصویر دارد و هم قیمت تخفیف خورده */  .product-card:has(img, .discounted-price) {    border: 3px solid #f39c12;    transform: scale(1.03);    transition: all 0.3s;  }  /* فرمی که هم ورودی ایمیل دارد و هم ورودی رمز عبور */  form:has(input[type="email"], input[type="password"]) {    max-width: 400px;    margin: 0 auto;  }

/* هر section که داخلش یک div با کلاس error وجود دارد */  section:has(.error) {    border: 2px solid #e74c3c;    background-color: #fff0f0;  }  /* هر article که داخلش یک h2 وجود دارد */  article:has(h2) {    margin-top: 40px;  }

/* divهایی که داخلشان img دارند اما img خالی نیست */  .card:has(img:not([src=""])) {    opacity: 1;  }  /* ورودی‌هایی که placeholder ندارند */  .input-group:has(input:not([placeholder])) {    border: 2px solid #f39c12;  }

/* پروژه کامل: داشبورد مدیریت تسک بدون جاوااسکریپت */  * {    margin: 0;    padding: 0;    box-sizing: border-box;  }     body {    font-family: system-ui, sans-serif;    background: #f0f2f5;    padding: 20px;  }     /* کانتینر اصلی */  .dashboard {    max-width: 1200px;    margin: 0 auto;  }     /* استایل تسک‌ها */  .task {    background: white;    border-radius: 12px;    padding: 16px;    margin-bottom: 12px;    transition: all 0.3s;    border: 1px solid #e0e0e0;  }     /* تسک‌های اولویت بالا */  .task:has(.priority-high) {    border-left: 5px solid #e74c3c;    background: #fff5f5;  }     /* تسک‌های اولویت متوسط */  .task:has(.priority-medium) {    border-left: 5px solid #f39c12;  }     /* تسک‌های اولویت پایین */  .task:has(.priority-low) {    border-left: 5px solid #2ecc71;  }     /* تسک‌های کامل شده */  .task:has(.status-completed) {    opacity: 0.6;    text-decoration: line-through;    background: #e8e8e8;  }     /* تسک‌های دارای ددلاین نزدیک */  .task:has(.deadline-soon) {    background: #fff0e6;    animation: pulse 1s infinite;  }     @keyframes pulse {    0%, 100% { transform: scale(1); }    50% { transform: scale(1.01); }  }     /* تسک‌های دارای تگ مهم */  .task:has(.tag-important) {    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.2);  }     /* فرم اضافه کردن تسک – هوشمند */  .task-form:has(input:placeholder-shown) .submit-btn {    opacity: 0.5;    cursor: not-allowed;  }     .task-form:not(:has(input:placeholder-shown)) .submit-btn {    opacity: 1;    cursor: pointer;    background: #3498db;  }     /* فیلتر تسک‌ها با رادیو باتن */  .filter-input {    display: none;  }     .filter-label {    padding: 8px 16px;    background: #ddd;    border-radius: 20px;    cursor: pointer;    margin: 0 5px;  }     #filter-all:checked ~ .task-list .task {    display: block;  }  #filter-high:checked ~ .task-list .task:not(:has(.priority-high)) {    display: none;  }  #filter-completed:checked ~ .task-list .task:not(:has(.status-completed)) {    display: none;  }  #filter-important:checked ~ .task-list .task:not(:has(.tag-important)) {    display: none;  }     /* هایلایت کردن دسته‌بندی فعال */  .filter-container:has(#filter-all:checked) .filter-label[for="filter-all"] {    background: #3498db;    color: white;  }  .filter-container:has(#filter-high:checked) .filter-label[for="filter-high"] {    background: #e74c3c;    color: white;  }

<div class="dashboard">    <h1>📋 مدیریت تسک‌ها</h1>        <div class="filter-container">      <input type="radio" name="filter" id="filter-all" class="filter-input" checked>      <label for="filter-all" class="filter-label">همه</label>            <input type="radio" name="filter" id="filter-high" class="filter-input">      <label for="filter-high" class="filter-label">اولویت بالا</label>            <input type="radio" name="filter" id="filter-completed" class="filter-input">      <label for="filter-completed" class="filter-label">کامل شده</label>            <input type="radio" name="filter" id="filter-important" class="filter-input">      <label for="filter-important" class="filter-label">مهم</label>    </div>        <div class="task-list">      <div class="task">        <div class="priority-high">اولویت: بالا</div>        <div class="tag-important">⭐ مهم</div>        <h3>پروژه CSS را تمام کن</h3>        <div class="deadline-soon">ددلاین: فردا</div>      </div>            <div class="task">        <div class="priority-medium">اولویت: متوسط</div>        <h3>بررسی ایمیل‌ها</h3>      </div>            <div class="task">        <div class="priority-low">اولویت: پایین</div>        <div class="status-completed">✓ کامل شده</div>        <h3>خرید کتاب</h3>      </div>    </div>        <div class="task-form">      <input type="text" placeholder="تسک جدید...">      <button class="submit-btn">➕ اضافه کن</button>    </div>  </div>