میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Combinators در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش Combinators در CSS با من همراه باشید.

دسته دیگری از سلکتورها که در این سری مقالات آموزش CSS مورد بررسی قرار می‌دهیم، شامل کامبیناتورها است. دلیل نام گذاری آن‌ها این است که سلکتورها را به ترتیب با هم ترکیب (Combination) می‌کنند که رابطه مفیدی با همدیگر و با مکان محتوا در سند ایجاد می‌کنند.

در بخش‌های قبلی با سلکتور Descendant مواجه شده‌ایم. این‌ها سلکتورهایی هستند که بینشان فاصله وجود دارد:

body article p

این سلکتورها عناصری را انتخاب می‌کنند که فرزندان سلکتورهای دیگر هستند. البته لزومی نیست که مستقیم فرزند دیگری باشند تا تطبیق پیدا کنند. در مثال زیر ما تنها عنصر <p> را تطبیق می‌دهیم که درون یک عنصر با کلاس ‎.box قرار دارد.

 


هم‌نیای مجاور

سلکتور «هم‌نیای مجاور» (adjacent sibling) با علامت بعلاوه (+) برای انتخاب چیزی که در مجاورت بلافصل عنصر دیگر در همان سطح قرار دارد استفاده می‌شود. برای نمونه برای انتخاب همه عناصر <img> که درست پس از عناصر <p> می‌آیند، می‌توان از سلکتور فوق به صورت زیر استفاده کرد:

یک کاربرد رایج این سلکتور آن است که کاری را روی پاراگرافی که پس از یک عنوان می‌آید انجام دهیم. در ادامه مثالی از آن ارائه شده است. در این مثال به دنبال پاراگرافی می‌گردیم که مستقیماً در کنار یک <h1> قرار دارد و آن را استایل‌بندی می‌کنیم.

اگر عنصر دیگری مانند <h2> را بین <h1> و <p> قرار دهید، متوجه خواهید شد که پاراگراف دیگر از سوی سلکتور تطبیق نمی‌یابد و از این رو رنگ‌های پس‌زمینه و پیش‌زمینه قبلی را به دست نمی‌آورند.

هم‌نیای مجاور
Combinators در CSS

 


هم‌نیای کلی

اگر می‌خواهید همه هم‌نیاهای یک عنصر را حتی در صورتی که در مجاورت مستقیم عنصر نباشند انتخاب کنید، می‌توانید از کامبیناتور «هم‌نیای کلی» (general sibling combinator) با علامت ~ استفاده کنید. برای انتخاب همه عناصر <img> که هر جایی پس از عنصر <p> می‌آیند، به صورت زیر عمل می‌کنیم:

در مثال فوق، همه عناصر <p> را که پس از <h1> می‌آیند و حتی آن‌هایی که درون یک <div> قرار دارند را انتخاب می‌کنیم:

 

<article>
    <h1>A heading</h1>
    <p>I am a paragraph.</p>
    <div>I am a div</div>
    <p>I am another paragraph.</p>
</article>

 

 

 

 


ul > li[class="a"] { }

 


امیدواریم آموزش Combinators در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

Combinators در CSScssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟