فصل css۳ خلاصه مطالب جلسه یازدهم - شبه کلاس ها ( seudo classes ) و position - بخش دوم

6- ( not ( nameTag :  یک موقع هست ما یک سری ویژگی رو میخواهیم به یک سری تگ بدهیم به غیر یک مورد  که در این جا از این سلکتور میایم و استفاده میکنیم 

html

 <div class="wrapper">
      <span>سادگی نامفهوم </span>
      <div>صنعت</div>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <header>تست</header>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
    </div>


css

.wrapper :not(header){
    color: red;
} 

7-  ( مثلا 6) nth-child  : ما با استفاده از این سلکتور میتوانیم بیایم و گام داشته باشیم و میتوانیم بگوییم که فرزند چندمش چه اتفاقی بیاد و براش بیفته 

.wrapper :nth-child(6){
  color: green;
}

نکته : این : قبل از سلکتور ها برای تاکید میاد و استفاده می شود 

8-  (6) nth-last-child : مشابه یک قبلی هست فقط میاد و شمارش رو از آخر شروع می کند 

9- ( p : nth-last-of-type ( 4  با مشخص کردن نوع صرفا میاد و بین اون  تگ ها  از آخر شروع میکند و فرزند مورد نظر رو انتخاب میکند 

.wrapper p:nth-last-of-type(4){
  color : red;
}

10- ( p : nth-of-type ( 4 مشابه یکی بالایی هست فقط میاد و از اول شروع به شمارش میکند 

نکته » important! میاد و اولویت هارو از بین می برد و اونی که این رو داره در اولویت قرار میدهد 

11-  nameTag : only-of-type  »  صرفا عنصری رو میاد و انتخاب میکند که تک فرزند هستش و مشابه اون نیستش 

.wrapper header:only-of-type{
  background-color: yellow;
}

12- nameTag :  onlychild   »  باید تنها فرزند این خانواده باشد و برای انتخاب تک فرزند ها میاد و مورد استفاده قرار میگیرد 

13- () nth -child سلکتور هایی برای انتخاب زوج و فرد ها که با مقادیر دادن odd  و even میایم و به صورا یک در میان انتخاب میکنیم 

معرفی پراپرتی  border-spacing  که میاد و فاصله عناصر درونی نسبت به بوردر اون رو میاد و انجام میدهد 

انتخاب اینپوت ها بر اساس پرارپرتی هایی که دارند 

input:disabled{
 background-color : red
}

input:read-only{
 background-color : yellow
}

input:required{
 background-color : green
}