پدر و فرزند در css

سلام دو ستان می شه کمی در مورد رابطه پدری و فرزندی در html و css توضیح دهید

وبگویید چطور می توان یک عنصر را پدر یا فرزند انتخاب کرد

متشکرم:قلب::قلب::قلب::قلب::قل� �::قلب::قلب::قلب::قلب::قلب::قلب: :قلب::قلب::قلب::قلب::قلب::قلب::� �لب::قلب::قلب::قلب::قلب::قلب:

سلام
فک کنم رابطه پدر و فرزندی و ... مربوط به js باشه!!! تا حالا تو css و html همچی چیزی ندیدم!!!
میشه 1 نمونه بذارید؟!

گزینشگرهای خویشاوندی عناصررابراساس رابطه شان بادیگرعناصرداخل کدانتخاب میکنند
مثل

کد HTML:

---

<div class="col">
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </div>

---

.col(ol li){

background: #ebebeb;

}

تمامی عناصرliبه عنوان فرزندونوه عنصرolراانتخاب میکنه حالااگه یکی ازاین liهادارای برچسب ulباشد وچندین liهم داخل اون باشه اونهاراهمانتخاب میکنه مثل

کد HTML:

---

<div class="col">
          <ol>
            <li></li>
            <li></li>
            <li> 
          <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul></li>
          </ol>
        </div>

---

ویافرزندمستقیم که تمامی عناصر li رابه طورمستقیم فرزند ol محسوب میشوندراانتخاب میکنه وعناصردیگه ای که داخل برچسب li قرارگرفته اندرانادیده میگیره مثل

.col(ol>li){

background: #ebebeb;

}

این دستورتنها li هایی که به طورمستقیم درداخل برچسب ol قرارگرفته باشندراانتخاب میکنه اگرکدرامثل این مثال بنویسی

کد HTML:

---

<div class="col">
          <ol>
            <li></li>
            <li></li>
            <li> 
          <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul></li>
          </ol>
        </div>

---

بادستورموردنظرهیچ کدام ار li هایی که داخل ul قرارگرفتن انتخاب نخواهندشد
مثال دیگه

.col(ol+li){

background: #ebebeb;

}

هستش این کدتمامی عناصر li راکه دارای والدیکسانی باعنصر ol هستندراانتخاب میکنه به شرطی که تمام این عناصر li بعدازعنصر ol درکدآماده باشه مثال

.col(li+li){

background: #ebebeb;

}

که تمامی li هاراانتخاب میکنه به جزاولین li
ویاگزینشگرهمزادمجاور

h1~h2{

background: #ebebeb;

}

این گزینشگرتمامی عناصرفرزندی کهh2 هست ووالدشون باوالد h1 راکه یکی هست مثل heder درپایین انتخاب میکنه

کد HTML:

---

مثال
<section class="cols">
  <heder>
      <h1>سایه دارنمودن</h1>
      <h2>strongسایه دارنمودن</h2>
  </heder>
  <p>strong</p>
  <h2>سایه دارنمودن سایه دارنمودن</h2>
  <p>strong</p>
</section>

---

که تمامی h2 هایی که بعداز h1 آمده باشدراانتخاب میکنه به شرطی که والدمستقیم هردوی عناصریکسان باشدبه همین خاطراگر h2 بعداز h1 آمده باشه ولی اگردریک برچسب دیگه قرارگرفته باشه توسط این گزینشگرانتخاب نمیشه مثل

heder(h1~h2){

background: #ebebeb;

}

این گزینشگراولین h2 توی این کدراانتخاب میکنه چون هردوی h1,h2 اینجادارای والدhederهستنددومین h2 انتخاب نمیشه چون که والداون برچسب section ویا cols هستش نهheder حالابادستور

.cols~h2{

background: #ebebeb;

}

میتونی این برچسب راهم انتخاب کنی ویا

h2~p{

background: #ebebeb;

}

که تنهاآخرین p انتخاب میشه واولین p قبل ازبرچسب h2 قرارگرفته انتخاب نمیشه چون section والداون هست
کدهای خویشاوند دیگه ای هم هست که به کاذب ساختاری مشهورندمثل

کد HTML:

---

        <div class="rw">
                                                <span>HTML5&amp;CSS3</span>
                                                <span>ارایه برنامه های جالب</span>
                                                <span>تاثیرگذاری بالا</span>
                                                <span>شناورسازی طرح ها</span>
                                                <span>ابزارباورنکردنی</span>
                                                <span>هوشمندی کدها</span>
                    </div>

---

اگربخواهیم برای هرکدام ازعناصریک خصیصه تعریف کنیم مجبوریم ازکلاس داخل صفحه استفاده کنیم ویابه هرکدام یک مشخصه بدیم که استانداردنیست میایم ازروش زیراستفاده میکنیم

.rw span:nth-child(1) { 

 -webkit-animation-delay: 10s; 

    -moz-animation-delay: 10s; 

         animation-delay: 10s; 

}

.rw span:nth-child(2) { 

 -webkit-animation-delay: 15s; 

    -moz-animation-delay: 15s; 

         animation-delay: 15s; 

}

.rw span:nth-child(3) { 

    -webkit-animation-delay: 20s; 

	-moz-animation-delay: 20s; 

	animation-delay: 20s; 

}

.rw span:nth-child(4) { 

    -webkit-animation-delay: 25s;

	-moz-animation-delay: 25s; 

	animation-delay: 25s; 

}

.rw span:nth-child(5) { 

    -webkit-animation-delay: 30s; 

	-moz-animation-delay: 30s; 

	animation-delay: 30s; 

}

.rw span:nth-child(6) { 

    -webkit-animation-delay: 35s;

	-moz-animation-delay: 35s; 

	animation-delay: 35s; 

}

که همه span های فرزندباشماره مشخص شدن از1 تا 6 که جداگانه میشه به هرکدام خصوصیات متفاوت خودش رادادوصفحه موردنظربانظم ترخواهدبودکه میتونی همین کدرادرنمونه لینک زیردرقسمت heder بالای صفحه ببینی بعداز10ثانیه
http://pacifist.site88.net/form/form.html
سرآدم گیج میره نه؟؟؟:گیج:

متشکر : لطفا در مورد سلکتور های مفهومی هم توضیح بدهید؟؟

نقل قول:

---

نوشته شده توسط caspianhero

متشکر : لطفا در مورد سلکتور های مفهومی هم توضیح بدهید؟؟

---

سلکتورهای مفهومی به سلکتورهایی گفته میشه که مفهوم خاصی رانشون بده مثال

کد HTML:

---

<footer class="footer">
<a href="facebook"target="blank"><img src="images/facebook.png"></a>
</footer>

---

که دراینجا

.footer{

text-align:center;

}

یک سلکتورمفهومی هستش وبرای footer مشخصات تعریف شده ویااین روش

کد HTML:

---

<div class="footer">
<a href="facebook"target="blank"><img src="images/facebook.png"></a>
</div>
<div class="heder">
<a href="facebook"target="blank"><img src="images/facebook.png"></a>
</div>

---