Element + Element در CSS

element-element

بسیاری از نکات و ترفندهای CSS یا همون Cascade Style Sheets در بسته ها یا دوره های آموزشی مطرح نشده و نمی شوند. هرچند خیلی کاربردی و در بسیاری مواقع راهگشا هستند. شاید بیشتر مدرس ها فکر می کنند این چیز ها بدیهی هست و باید همه به صورت پیشفرض با این موارد باشند! به هر حال من که خیلی اتفاقی با اهمیت علامت "+" در CSS آشنا شدم. چیزی که در سایت w3schools به اون CSS element+element Selector گفته میشه.

در واقع وقتی داشتم روی یکی از قالب های شرکت YooTheme کار می کردم متوجه شدم بعضی از المنت ها به روش غیر طبیعی (چون تا حالا مشابهش رو ندیده بودم!) در CSS قالب استایل دهی شدن. فرض کنید دو المنت با نوع و کلاس های مشابه دارید، مثلا دو div با کلاس position-a . خوب حالا اگه قصد داشته باشیم فقط به position-a از div دوم margin-bottom با مقدار ۳۰px بدیم باید چه کار کنیم؟!

 

<div class="position-a"></div>
<div class="position-a"></div>

 

راه حل در دستان همین "+" هست!

کافیه استایل رو به شکل زیر بنویسیم:

.position-a + .position-a{
  margin-bottom: 30px;
}

یا اگر قصد داشته باشیم به  p هایی که بعد از div استفاده شده بکگراند زرد بدیم از کد زیر استفاده میکنیم:

<div></div>
<p></p>

 

div + p { 

background-color: yellow;

}

روش کار :

نحوه کار این دستور به این شکل هست که اگر المنت دوم بعد از المنت اول بود استایل ها رو به المنت دوم اختصاص بده! در مثال بالا شرط این هست که اگر p بعد از div بود، بکگراند p زرد شود!

این قابلیت ساده خیلی وقت ها میتونه گره های عجیب و پیچیده رو به راحتی باز کنه.

Element + Element از css2 در css قرار داده شده و تمام مرور گرهای جدید و IE7 به بالا این قابلیت رو پشتیبانی می کنند.

امیدوارم این نکته برای شما مفید واقع بشه، سعی می کنم در پست های بعدی بیشتر در مورد نکات کاربردی CSS بنویسم.

دیدگاهتان را بنویسید

قالب جوملا | جومپلیت | دانلود قالب رایگان جوملا و فروشگاه قالب جوملا

جومپلیت ، مرکز دانلود قالب جوملا و ارائه دهنده قالب رایگان جوملا ، قالب جوملا 2.5 و قالب فارسی جوملا است.

joomplate [@] gmail.com

ورود کاربران

بازيابي رمز عبور!