۱ emad ta
فصل css۳ خلاصه مطالب جلسه یازدهم - شبه کلاس‌ها ( seudo classes ) و position - بخش دوم
جامعه Html & CSS ایجاد شده در ۱۷ مرداد ۱۳۹۹

سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

 

1- frist-child || p:frist-child  : اولین عنصر از یک  خانواده رو میاد و برای ما اجرا میکند 

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

Html
<div class="wrapper">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
    </div>
css
.wrapper p:frist-child{
    color: red;
}

 

2- frist-of-type || p:frist-of-type : متناسب با سلکتور بالا شاید ما صرفا یک تگ رو نداشتیم و المان‌های مختلفی رو  داشتیم و چن تا تا تگ p  داشته باشیم که میاد و اولین تگ p  رو برای ما انتخاب میکند 

html
 <div class="wrapper">
      <span>سادگی نامفهوم </span>
      <div>صنعت</div>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <header>تست</header>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
    </div>
css
.wrapper p:first-of-type{
  color: green;
}

 

3- in-range : میاد و یک input رو انتخاب میکند که یک مقدار یا رنج خاصی رو دارد 

 

4- last-child || p:last-child  : مشابه یک اول هست فقط میاد و آخرین عنصر رو برامون انتخاب می‌کند

 

5- last-of-type || p:last-of-type :  مشابه مورد دوم هست فقط میاد و اخرین تگی که در این خانواده وجود دارد رو برای ما انتخاب میکند 

 

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

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
}
emad ta ۱۷ مرداد ۱۳۹۹، ۱۶:۰۵