خلاصه و چکیده از تمامی selector ها در css

برای استفاده از فایل ها ی css ما به طور خلاصه می توانیم از 3 تا راه بیایم و پیروی کنیم که به ترتیب اولویت اون ها 

1- inline  : استفاده از پراپرتی استایل در داخل تگ

2- interline : استفاده از تگ استایل در داخل تگ head

3- external : به صورت ماژول استفاده کردن و اضافه کردن آن با استفاده از تگ لینک که معقولانه ترین راه همین سومی هستش

<link rel="styleSheet" type="text/css"  href="style.css" >

برا استایل دادن ها به صورت ماژول ما معمولا از کلاس ها و آیدی ها استفاده میکنیم که برای استایل دادن به نام کلاس ها در اول آن ها از .  و برای نام آیدی ها # استفاده میکنیم همچنین برای دادن یک استایل به همه هم از * می توانیم استفاده بکنیم

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

<style>
h5.test1 {
color: red;
font-size: larger;
}
h4.test1 {
color: yellow;
font-size: larger;
}
</style>

-------------------------------------------------------------------------------------------------------------------------------------

sudo class : نوعی ساختار در css هستند که باعث کنترل کردن یا فیلتر کردن یک سری از المان ها طبق قوانین که ما براشون تعین  میکنیم هستند 

1- hover : زمانی که میایم و روی اون المانمون با موس می رویم این عمل رو انجام داده ایم

2- active : مال موقعی هستش که میایم و روی اون عمل کلیک کردن رو انجام میدهیم

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

4- visited : میگوید که این المان ما اومده و دیده شده است و تا اخر طول عمر پروژه داخل کچ مرورگر ما می مان

5- frist-child || p:frist-child : اولین عنصر از یک خانواده رو میاد و برای ما اجرا میکند اگر ما در داخل یک تگ div  برای مثال تعدای تگ یا عناصر از یک خانواده داشتیم برای مثال همشون تگ p بودن برای  انتخاب اولیشون می توانییم از این سلکتور بیایم و استفاده بکنیم

6-  last-child || p:last-child : شیوه اجراییش کپی یکی بالایی هستش فقط به جای اولین عنصر از خانواده میاد و برای اخرین عنصر اعمال میکند 

7- frist-of-type || p:frist-of-type :  ی موقعی هست ما در داخل یک تگ مثل div المان ها و عناصر مختلفی رو داریم و میخاهیم با صرف نظر از نوع هاشون که مثلا برامون مهم نیست تگ p یا span  داخلشون چن تا باشه بیاد و اولین تگ موجود در اون رو برامون انتخاب کنه تا استایلی که میخایم رو روش اعمال کنیم از این سودو کلاس استفاده میکنیم

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

9- ( ) not : یک موقع هست ما یک سری استایل رو میخاهیم به همه المان هامون اعمال کنیم به غیر از یک المان خاص که با استفاده از این سلکتور ما میتوانیم با استفاده از نقیض بگیم بیا و این استایل رو اعمال به همه الا به اون تگی که داخل پرانتز این سودو کلاس گفتیم

10- () nth-child : ما با استفاد از این سلکتور میتوانیم بیایم و گام برداریم در استایل دادن به المان هامون مثلا بیایم و بگیم این استایل رو برای استایل 4 امش اعمال کن و میاد از اولین عنصر فرزندش شروع به شمارش میکنه و وقتی به اون میرسه استایل رو اعمال میکند و یک عدد رو به عنوان مقدار میگیرد ( این سودوکلاس نوع المان های فرزند براشون مهم نیستش ) 

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

نکته » برای استایل دادن به المان های زوج و فرد می توانیم بیایم و از مقادیر odd یا even در داخل آن ها استفاده بکنیم با هم مقادیر ریاضی بدهیم مثلا 2n+1 

12-  ( ) p:  nth-of-type در این سودو کلاس متناسب با مشخص کردن نوع سودوکلاس امون میاد و شمارش رو از بین اون ها انجام میدهد و شمارش از اول هستش

13-  ( ) p:  nth-last-of-type مشابه یکی بالایی هستش فقط شمارش از آخر هستش

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

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

-------------------------------------------------------------------------------------------------------------------------------------

شبه عناصر یا شبه تگ ها  ( sudo elements ) 

1-  Selection ::  »  موقعی که میایم و انتخاب یا سلکت میکنیم مورد استفاده قرار میگیرد و مثلا میتوانیم رنگ سلکت رو تغیر بدهیم که ما میتوانیم به همه عناصر و یا به یک تگ خاص بیایم و بدهیم

2- line-frist :: » میاد و تغیرات رو فقط برای خط اول ما اعمال میکند و برای بقیه خط ها کاری رو انجام نمیدهد و روی بعضی از عناصر اعمال نمی شود مثلا روی span اعمال نمیشود که به طور کلی می توان گفت تگ هایی که به صورت بلاکی نیستند و inline هستند این سودو المنت روشون اعمال نمی شود موقعی که ما از این سودو المنت استفاده میکنیم مجاز هستیم که پراپرتی های زیر رو براش استفاده بکنیم dfont Properties & color Propertise

3- letter-frist :: میاد و برای اولین کلمه برامون اعمال می کند

مبحث مهم 

4- before & :: after :: » یک موقع هست ما نمیخاهیم بیایم و یک المان یا تگ جدید اضافه کنیم و صرفا میخایم به یک تگ امون مثلا در این جا تگ span بیایم و به بعد یا قبلش یک محتوایی رو اضافه کنیم یا یک متن یا یک تصویر یا یک ایکون برای همین از این شبه عناصر ها استفاده میکنیم که در داخل آن ها باید حتما از تگ content استفاده بکنیم

که حال در داخل آن یک url یا unocode icon  و یا یک متن و یا " "  قرار میدهیم

-------------------------------------------------------------------------------------------------------------------------------------

css combinators Selectors روش های متفاوت برای انتخاب المان ها

descendant selector ( space ) -1

div p a { }

2-Slecetor child یک موقع هست ما در داخل یک تگ والد مثل همین div میایم و یکسری المان دیگه هم تعریف میکنیم حال میخواهیم از فرزندانش فقط یک سری مثلا تگ های p رو انتخاب کنیم که برای این کار میایم و از این نوع سلکتورا استفاده میکنیم

div > p { }

3- ( + ) adjacent  sibling selector بلافاصله بعدش انتخاب برادر یا خواهر کناریش مثلا اون تگ div که کلاس d را دارد بلافاصله بعدش تگ p رو بیا و انتخاب بکنش

div.d + p { }

۴- ( ~ ) general sibling selector مثل یک بالای بلافاصله نیست میگه هر چقدر خواهر یا برادر داشت من انتخاب میکنم فقط نوع اش رو برای من مشخص بکن

main.parent ~ span { }

5-  ما میتوانیم عناصر و المان ها و کلاس های دیگر رو بیایم و باهم انتخابشون بکنیم فقط با این تفاوت که با یک ,  انتخابشون میکنیم   مثل     {  } ul,li

-------------------------------------------------------------------------------------------------------------------------------------

atribute Selector  انتخاب المان ها بر اساس صفت هاشون 

1- انتخاب بر اساس ویژگی Atribut

.login input[disabled] { }

2- انتخاب براساس مقادیر یک Atribute

.login input[value= " emad" ] {}
.login input[type= " email" ] {}

نکته » استفاده از =~ که میاد در اون جمله میگرده و نکته ی مهمی برای کار هست هم فراموش نکنین

html -------------->

<img src="./image1.jpg" alt="nature" >
<img src="./image1.jpg" alt="tiger of nature" >


css ---------------->
<style>

img[alt="nature"]{
فقط برای اولی اعمال می شود
}

img[alt~="nature"]{
 برای هر دوتا اعمال می شود
}

</style>

3- class Atribute » می توانیم با استفاده از آن در نام های کلاس هامون بیایم و یک فیلتر رو انجام بدهیم 

که چهارتا  نوع برای انتخاب کردن دارد  

اولی

section#t [class |= text ] { color : red }

کلمه ی text شروع کننده و در اول باشد و با - هم جدا شده باشند رو میاد و انتخاب میکند

دومی =^

section#w [ class^="text" ] { color = red }

کلمه ی text فقط شروع کننده باشد و نیازی به - نیست در ان

تفاوت =| با =^ در این هست که اگر در اولی اون متن ما وجود داشت و بعد اون یک دنباله اومده بود که با - جدا شده بودند کلمات هم بیا و انتخابشون بکن ولی در دومی اگر - هم وجود نداشت هم میاد و انتخابشون میکند به شرطی که شروعش با کلمه ای که مشخص کرده ایم باشد

سومی =$  

کلمه ی text ما در آخر باشه و نیازی به - هم نیستش 

section#w [ class $= "text" ] { color = red }

چهارمی =* 

هرچیزی که در نام کلاس ها برابر با مقدار text بود رو بیا و برای من انتخابش بکن و برام فرقی نمیکنه که اول یا اخر و یا با - یا بدون - باشه 

section#w [ class *= "text" ] { color = red }