جستجو برای: این موضوع 2 پاسخ، 3 کاربر را دارد و آخرین بار در 1…

محمد صالح · Fri, 12 Aug 2022 13:13:07 +0000

سلام چرا شبه سلکتور p:nth-child(an+b) درباره p های غیر فرزند نیز صادق است ؟یعنی زمانی که در css برای این دسته از پاراگراف ها کد می نویسیم پاراگراف هایی که فرزند نیستند و مستقیم زیر تگ body قرار دارند نیز مشمول این دستورات می گردند.

سلام دوست عزیز .امیدوارم خوب باشید. ما در کد کد html ساختار کلی به صورت سلسه مراتبی هست و عملا وقتی شما یک عنصر زیر تگ body اضافه می کنید، اون عنصر فرزند body حساب میشه. به کد زیر توجه کنید. [scode lang="html"] p:nth-child(3n-1) { background: red; } The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. The fifth paragraph. The sixth paragraph. The seventh paragraph. The eight paragraph. The ninth paragraph. [/scode] عملا پاراگراف های 2 و 5 و 8 بک رگاندشون قرمز رنگ میشه دلیلشم اینه که خود تگ p فرزند body حساب میشه. در کل ساختار سلسه مراتبی هست یعنی تگ body زیر مجموعه و فرزند html حساب میشه، ولی چون ساختار اصلی html به این صورت هست ، توی ذهن شما به صورت پدر و فرزند در نظر گرفته نمیشه. اگر کد زیر رو اضافه کنید می بیبنید که body زرد رنگ میشه. [scode lang="html"] html:nth-child(1){ background-color:yellow; } [/scode] این کد یعنی اولین فرزند زیر مجموعه html بک گراندش زرد بشه و عملا body چون فرزند html هست و همین یک فرزند هست و شماره 1 هست پس زمینه زرد میشه.

ساختار nth-child به چه صورتی است؟ - کمپین آموزشی بی لرن

این موضوع 2 پاسخ، 3 کاربر را دارد و آخرین بار در 1 سال قبل بدست علی ربیع زاده به‌روزرسانی شده است.

در حال نمایش 3 نوشته (از کل 3)

نویسنده

نوشته‌ها
21 مرداد 1401 در 17:43 #18667

محمد صالح
مشارکت کننده

سلام

چرا شبه سلکتور p:nth-child(an+b) درباره p های غیر فرزند نیز صادق است ؟یعنی زمانی که در css برای این دسته از پاراگراف ها کد می نویسیم پاراگراف هایی که فرزند نیستند و مستقیم زیر تگ body قرار دارند نیز مشمول این دستورات می گردند.

21 مرداد 1401 در 17:54 #18668

مدیریت سایت
مدیرکل

سلام لطفا عنوان مناسب با موضوع سوال پرسیده شود در غیر این صورت موضوع مربوطه پاک می شود.. برای مثال ساختار nth-child به چه صورتی هست؟ با تشکر . استفاده از عنوان مناسب کمک میکنه که بقیه کاربرها نیز بهتونن درست جستجو کنند.

21 مرداد 1401 در 18:15 #18671
علی ربیع زاده
مدیرکل
سلام دوست عزیز .امیدوارم خوب باشید. ما در کد کد html ساختار کلی به صورت سلسه مراتبی هست و عملا وقتی شما یک عنصر زیر تگ body اضافه می کنید، اون عنصر فرزند body حساب میشه.
به کد زیر توجه کنید.
```
     <!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(3n-1) {
  background: red;
}
</style>
</head>
<body>

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

The fifth paragraph.

The sixth paragraph.

The seventh paragraph.

The eight paragraph.

The ninth paragraph.


</body>
</html>
    
```
عملا پاراگراف های 2 و 5 و 8 بک رگاندشون قرمز رنگ میشه دلیلشم اینه که خود تگ p فرزند body حساب میشه. در کل ساختار سلسه مراتبی هست یعنی تگ body زیر مجموعه و فرزند html حساب میشه، ولی چون ساختار اصلی html به این صورت هست ، توی ذهن شما به صورت پدر و فرزند در نظر گرفته نمیشه.

اگر کد زیر رو اضافه کنید می بیبنید که body زرد رنگ میشه.
```
html:nth-child(1){
background-color:yellow;
}
    
```
این کد یعنی اولین فرزند زیر مجموعه html بک گراندش زرد بشه و عملا body چون فرزند html هست و همین یک فرزند هست و شماره 1 هست پس زمینه زرد میشه.

2 کاربر که از نویسنده این موضوع تشکر کرده اند.

محمد صالح, مدیریت سایت
نویسنده

نوشته‌ها