خانه انجمن ها زبان HTML و CSS ساختار nth-child به چه صورتی است؟

در حال نمایش 3 نوشته (از کل 3)
  • نویسنده
    نوشته‌ها
  • #18667
    محمد صالح
    مشارکت کننده

    سلام

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

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

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

    #18671

    سلام دوست عزیز .امیدوارم خوب باشید. ما در کد کد html ساختار کلی به صورت سلسه مراتبی هست و عملا وقتی شما یک عنصر زیر تگ body اضافه می کنید، اون عنصر فرزند body حساب میشه.
    به کد زیر توجه کنید.

         <!DOCTYPE html>
    <html>
    <head>
    <style> 
    p:nth-child(3n-1) {
      background: red;
    }
    </style>
    </head>
    <body>
    
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>The fifth paragraph.</p>
    <p>The sixth paragraph.</p>
    <p>The seventh paragraph.</p>
    <p>The eight paragraph.</p>
    <p>The ninth paragraph.</p>
    
    </body>
    </html>
        

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

    اگر کد زیر رو اضافه کنید می بیبنید که body زرد رنگ میشه.

    html:nth-child(1){
    background-color:yellow;
    }
        

    این کد یعنی اولین فرزند زیر مجموعه html بک گراندش زرد بشه و عملا body چون فرزند html هست و همین یک فرزند هست و شماره 1 هست پس زمینه زرد میشه.

    2 کاربر که از نویسنده این موضوع تشکر کرده اند.
در حال نمایش 3 نوشته (از کل 3)
  • شما برای پاسخ به این موضوع باید وارد شوید.