طراحی سایت اختصاصی

دوستانی که در موضوع ساخت وب سایت با css فعال می باشند با دو انتخابگر شبیه به یکدیگر روبرو میباشند که حتی طراحانی که چند زمان میباشد با css درگیر به فعالیت میباشند نیز درمورد این دو انتخابگر با نادرست مواجه می شوند . یکی‌از این انتخابگرها nth-child و دیگری nth-of-type میباشد . هردو این انتخابگرها برای گزینش یک یا این که یک سری طراحی سایت اختصاصی مورد از فی مابین یک سری مورد شبیه یا این که حتی غیرمشابه که در باطن یک والد معین میباشند استعمال می شود . ابندا از nth-child آغاز کنیم ! سیر تا پیاز nth-child در css همان طور که از نام این انتخابگر معلوم میباشد در امر گزینش چندین ( باتوجه به nth ) گزینه فرزند ( child ) باطن یک والد مشخص و معلوم میباشد . به کد ذیل اعتنا نمایید :

Lorem Text

Home Page
Span Tag
Child For Wrap_T

در باطن این کد شما با 4 تگ متعدد html روبرو می باشید که یکی‌از نوع p ، یک کدام از نوع a ، یک کدام از نوع span و گزینه انتها از نوع تگ Div میباشد . همگی این 4 تگ ، فرزندان Div والد می‌باشند ک کلاس Wrap_T را داراست .

پیشنهادی : نخبه css ، عصر جامع یادگرفتن css از سیر تا پیاز
تگ از نوع p فرزند نخستین ، تگ از نوع a فرزند دوم ، تگ از نوع span فرزند سوم و گزینه پایان از نوع تگ Div فرزند چهارم یا این که همان فرزند انتها میباشد . فعلا در شرایطی که قصد داشته باشم تا فرزند سوم را گزینش کنیم که یک تگ span میباشد میتوانیم از کد ذیل به کارگیری کنیم :

.Wrap_T:nth-child(3){
/* .... */
}
شاید برای شما سئوال باشد که چرا مستقیما به تگ span اشاره نکردیم که موقعیت بی آلایش‌تری بود . نکته اینجاست که در صورتی‌که چند تگ span درون Wrap_T باشد ، نمی‌قدرت مستقیما برای یک تگ span خاص در درون آن استایلی نوشت مگر اینکه به آن تگ span ، کلاسی تخصیص داده گردد ولی به یاری فرزند گزینی ، فارغ از اینکه کلاسی به تگ span سوم داده گردد ، میتوانیم آن را گزینش کنیم و بقیه تگ های span که آن گاه ممکن میباشد قرار گرفته باشد ؛ فارغ استایل اجرا گردیده قرار خواهند گرفت .

اعتنا داشته باشید که شماره فرزندان از شماره ” 1 ” آغاز میشود . فعلا برای تعیین فرزند دوم نیز میتوان از فرمان nth-child(2) بهره برد . در حالتی دیگر ممکن میباشد کدهای شما به صورت پایین باشد که کلیه گزینه های درون تگ والد از یک نوع میباشند یعنی از جمله تمامی تگ li میباشند :

List Item 1

List Item 2

List Item 3

List Item 4

List Item 5

در‌این‌صورت‌ نیز می‌قدرت دوباره از امر nth-child استعمال کرده و مثلا li شماره 5 را تعیین کرد که ولی دو فرمان معروف نیز برای تعیین فرزند نخستین و انتها به صورت پایین وجود داراست :

:first-child{}
:last-child{}
به امداد این دو سلکتور نیز می توانید فرزند نخستین و فرزند انتها در باطن یک والد را گزینش فرمایید فارغ از اینکه نگران باشید گزینه پایان از جمله شماره 5 خواهد بود یا این که شماره 20 ، در هرصورت گزینه نخستین و گزینه پایان باطن والد ، تعیین گردد . این فرمان همان طور که مشاهده کردید ، اهمیتی نخواهد بخشید که تگ های باطن یک مورد والد شبیه هم می‌باشند یا این که گوناگون از هم ، یعنی در هردو حالتی که در نمونه های بالا خدمتتان معرفی کردیم می‌قدرت از فرمان nth-child استفاده نمود . این مورد را تا این نصیب در ذهن خویش داشته باشید تا سراغ سلکتور آینده برویم .

سیر تا پیاز nth-of-type در css
درخصوص nth-of-type بایستی چندین مرتبه توجه خویش را ارتقاء دهید . از نام nth-of-type چنین شعور میگردد که فرزند مشخصی ( باتوجه به nth ) از نوع مشخصی یا این که همان یک تگ معین ( با اعتنا به type ) را گزینش خواهد کرد . به نمونه ذیل دقت فرمائید :

Lorem Text

Home Page
List Item 1

Span Tag
List Item 2

Child For Wrap_T

List Item 3

در‌این نمونه ، در باطن به عبارتی Wrap_T که در صدر نیز داشتیم ، یکسری مورد li درون بقیه فرزندها نیز اضافه گردیده است . فعلا در درون این نمونه قصد داریم تا li دوم که باطن آن عبارت List Item 2 بوده و در واقعیت فرزند 5 میباشد را تعیین کنیم . خب در نمونه بالا ممکن میباشد قصد داشته باشید تا از nth-child برای فرزند 5 استعمال نمائید .

ولی نکته حائض اهمیت اینجاست که در شرایطی که پیش از li مدنظر که فرزند 5 میباشد ، یکسری فرزند دیگر نیز اضافه گردد ، دیگر این li فرزند 5 نخواهد بود ، پس می بایست از nth-of-type استعمال کنیم !
برای اینکه در لیست بالا ، مورد li مدنظر که باطن آن متن List Item 2 جای‌دارد را گزینش کنیم بایستی به صورت تحت شغل کنیم :

.Wrap_T li:nth-of-type(2){
/*...*/
}
در‌این امر ، کاری با بقیه تگ ها نداریم . در واقعیت چنین گفتیم که در باطن Wrap_T به سراغ تگ های li برو و فی مابین تگ های li ، دو‌مین مورد از آن‌ها را تعیین کن . پس به یاری این فرمان می توانیم به نوع یک تگ اشاره کرده و فرزندان آن را تعیین کنیم ، سوای اینکه یک سری تگ دیگر در درون والد اساسی و یا این که در کنار آن‌ها وجود دارااست !

همینطور دو سلکتور دیگر نیز به صورت ذیل وجود دارا‌هستند :

:last-of-type
:first-of-type
که امداد خواهد کرد تا اولی مورد و واپسین گزینه از یک نوع معین را درون والد مدنظر خودتان گزینش نمایید که اما هر کدام از این دستورها نیز خویش می توانند زیرشاخه‌هایی داشته باشند که موقتا زمینه آموزشی در‌این نوشته ی علمی وجود ندارد . درین محتوا کارایی کردیم تا به شکلی بی آلایش و با لهجه بیان کننده تفاوت مهم در بین nth-child و nth-of-type در css را خدمتتان گستردن دهیم ، درصورت داشتن هرگونه ایراد و سئوال در ارتباط با این دو سلکتور می توانید در نصیب نگرش‌های این نوشته‌ی‌علمی همپا ما باشید . پیروز و پاینده باشید دوستان اینجانب .

دوستانی که در موضوع ساخت وب سایت با css فعال می باشند با دو انتخابگر شبیه به یکدیگر روبرو میباشند که حتی طراحانی که چند زمان میباشد با css درگیر به فعالیت میباشند نیز درمورد این دو انتخابگر با نادرست مواجه می شوند . یکی‌از این انتخابگرها nth-child و دیگری nth-of-type میباشد . هردو این انتخابگرها برای گزینش یک یا این که یک سری طراحی سایت اختصاصی مورد از فی مابین یک سری مورد شبیه یا این که حتی غیرمشابه که در باطن یک والد معین میباشند استعمال می شود . ابندا از nth-child آغاز کنیم ! سیر تا پیاز nth-child در css همان طور که از نام این انتخابگر معلوم میباشد در امر گزینش چندین ( باتوجه به nth ) گزینه فرزند ( child ) باطن یک والد مشخص و معلوم میباشد . به کد ذیل اعتنا نمایید :

Lorem Text

Home Page
Span Tag
Child For Wrap_T

در باطن این کد شما با 4 تگ متعدد html روبرو می باشید که یکی‌از نوع p ، یک کدام از نوع a ، یک کدام از نوع span و گزینه انتها از نوع تگ Div میباشد . همگی این 4 تگ ، فرزندان Div والد می‌باشند ک کلاس Wrap_T را داراست .

پیشنهادی : نخبه css ، عصر جامع یادگرفتن css از سیر تا پیاز
تگ از نوع p فرزند نخستین ، تگ از نوع a فرزند دوم ، تگ از نوع span فرزند سوم و گزینه پایان از نوع تگ Div فرزند چهارم یا این که همان فرزند انتها میباشد . فعلا در شرایطی که قصد داشته باشم تا فرزند سوم را گزینش کنیم که یک تگ span میباشد میتوانیم از کد ذیل به کارگیری کنیم :

.Wrap_T:nth-child(3){
/* .... */
}
شاید برای شما سئوال باشد که چرا مستقیما به تگ span اشاره نکردیم که موقعیت بی آلایش‌تری بود . نکته اینجاست که در صورتی‌که چند تگ span درون Wrap_T باشد ، نمی‌قدرت مستقیما برای یک تگ span خاص در درون آن استایلی نوشت مگر اینکه به آن تگ span ، کلاسی تخصیص داده گردد ولی به یاری فرزند گزینی ، فارغ از اینکه کلاسی به تگ span سوم داده گردد ، میتوانیم آن را گزینش کنیم و بقیه تگ های span که آن گاه ممکن میباشد قرار گرفته باشد ؛ فارغ استایل اجرا گردیده قرار خواهند گرفت .

اعتنا داشته باشید که شماره فرزندان از شماره ” 1 ” آغاز میشود . فعلا برای تعیین فرزند دوم نیز میتوان از فرمان nth-child(2) بهره برد . در حالتی دیگر ممکن میباشد کدهای شما به صورت پایین باشد که کلیه گزینه های درون تگ والد از یک نوع میباشند یعنی از جمله تمامی تگ li میباشند :

List Item 1

List Item 2

List Item 3

List Item 4

List Item 5

در‌این‌صورت‌ نیز می‌قدرت دوباره از امر nth-child استعمال کرده و مثلا li شماره 5 را تعیین کرد که ولی دو فرمان معروف نیز برای تعیین فرزند نخستین و انتها به صورت پایین وجود داراست :

:first-child{}
:last-child{}
به امداد این دو سلکتور نیز می توانید فرزند نخستین و فرزند انتها در باطن یک والد را گزینش فرمایید فارغ از اینکه نگران باشید گزینه پایان از جمله شماره 5 خواهد بود یا این که شماره 20 ، در هرصورت گزینه نخستین و گزینه پایان باطن والد ، تعیین گردد . این فرمان همان طور که مشاهده کردید ، اهمیتی نخواهد بخشید که تگ های باطن یک مورد والد شبیه هم می‌باشند یا این که گوناگون از هم ، یعنی در هردو حالتی که در نمونه های بالا خدمتتان معرفی کردیم می‌قدرت از فرمان nth-child استفاده نمود . این مورد را تا این نصیب در ذهن خویش داشته باشید تا سراغ سلکتور آینده برویم .

سیر تا پیاز nth-of-type در css
درخصوص nth-of-type بایستی چندین مرتبه توجه خویش را ارتقاء دهید . از نام nth-of-type چنین شعور میگردد که فرزند مشخصی ( باتوجه به nth ) از نوع مشخصی یا این که همان یک تگ معین ( با اعتنا به type ) را گزینش خواهد کرد . به نمونه ذیل دقت فرمائید :

Lorem Text

Home Page
List Item 1

Span Tag
List Item 2

Child For Wrap_T

List Item 3

در‌این نمونه ، در باطن به عبارتی Wrap_T که در صدر نیز داشتیم ، یکسری مورد li درون بقیه فرزندها نیز اضافه گردیده است . فعلا در درون این نمونه قصد داریم تا li دوم که باطن آن عبارت List Item 2 بوده و در واقعیت فرزند 5 میباشد را تعیین کنیم . خب در نمونه بالا ممکن میباشد قصد داشته باشید تا از nth-child برای فرزند 5 استعمال نمائید .

ولی نکته حائض اهمیت اینجاست که در شرایطی که پیش از li مدنظر که فرزند 5 میباشد ، یکسری فرزند دیگر نیز اضافه گردد ، دیگر این li فرزند 5 نخواهد بود ، پس می بایست از nth-of-type استعمال کنیم !
برای اینکه در لیست بالا ، مورد li مدنظر که باطن آن متن List Item 2 جای‌دارد را گزینش کنیم بایستی به صورت تحت شغل کنیم :

.Wrap_T li:nth-of-type(2){
/*...*/
}
در‌این امر ، کاری با بقیه تگ ها نداریم . در واقعیت چنین گفتیم که در باطن Wrap_T به سراغ تگ های li برو و فی مابین تگ های li ، دو‌مین مورد از آن‌ها را تعیین کن . پس به یاری این فرمان می توانیم به نوع یک تگ اشاره کرده و فرزندان آن را تعیین کنیم ، سوای اینکه یک سری تگ دیگر در درون والد اساسی و یا این که در کنار آن‌ها وجود دارااست !

همینطور دو سلکتور دیگر نیز به صورت ذیل وجود دارا‌هستند :

:last-of-type
:first-of-type
که امداد خواهد کرد تا اولی مورد و واپسین گزینه از یک نوع معین را درون والد مدنظر خودتان گزینش نمایید که اما هر کدام از این دستورها نیز خویش می توانند زیرشاخه‌هایی داشته باشند که موقتا زمینه آموزشی در‌این نوشته ی علمی وجود ندارد . درین محتوا کارایی کردیم تا به شکلی بی آلایش و با لهجه بیان کننده تفاوت مهم در بین nth-child و nth-of-type در css را خدمتتان گستردن دهیم ، درصورت داشتن هرگونه ایراد و سئوال در ارتباط با این دو سلکتور می توانید در نصیب نگرش‌های این نوشته‌ی‌علمی همپا ما باشید . پیروز و پاینده باشید دوستان اینجانب .