منو
خانهویرایشگرهای عکس

انتخابگرهای مجاور CSS Tutorial - CSS Adjacent Selectors Css Adjacent Elements

نحو CSS ساده است و برای درک آن نیازی به مدرک دکترای فناوری اطلاعات ندارید. با این حال، این یکی از معدود زبان های محبوبی است که به معنای واقعی کلمه منطقی نیست. برخلاف سایر زبان های برنامه نویسی وب مانند جاوا اسکریپت و پی اچ پی، مشکلات CSSبا منطق معمولی حل نمی شود. الگوریتم‌هایی مانند «اگر X، پس Y را انجام بده، در غیر این صورت Z را انجام بده» یا «همه Y را انتخاب کنید، سپس X را با آنها انجام دهید» را نمی‌توان در زبانی مانند CSS پیاده‌سازی کرد. به زبان ساده، این زبانی است که برای طراحی طراحی شده است، زبانی برای طراحان، نه توسعه دهندگان. برخی از برنامه نویسان با تجربه ای که من با آنها کار کرده ام به همین دلیل تلاش زیادی برای تسلط بر CSS انجام داده اند.

یادگیری CSS با کلاس ها و شناسه ها و استفاده شروع می شود. و # برای نشان دادن مستقیم عناصر. این برای ساخت یک وب سایت کاملاً کاربردی کافی است، اما در صورت طراحی مجدد کامل به اندازه کافی انعطاف پذیر نیست. بیایید نگاهی به یک رویکرد جایگزین برای مدیریت این عناصر دشوار در دسترس بیندازیم.

کمباین مربوط به همسایه
بیایید با یک انتخابگر شروع کنیم که در موقعیت‌های دشوار به کار می‌آید - با یک ترکیب‌کننده مرتبط همسایه. یک ترکیب کننده مرتبط همسایه با به هم پیوستن دو عنصر با علامت + نشان داده می شود:

H1+p
این عنصر p بعدی را بلافاصله بعد از عنصر h1 در DOM انتخاب می کند. تئوری تایپوگرافی پیشنهاد می‌کند که باید پاراگراف‌های متن را تورفتگی کنیم، اما فقط در صورتی که از پاراگراف دیگری پیروی کنند. در عمل، می توان از این برای تورفتگی تمام پاراگراف ها به جز اولین پاراگراف استفاده کرد:
p + p (تورفتگی متن: 1em؛ )
این بسیار راحت تر از برجسته کردن پاراگراف اول با class="first" است. سه خط، بدون کلاس و پشتیبانی کامل از مرورگر. اگر تگ‌های img مرتبط با محتوا را در داخل تگ‌های p قرار می‌دهید (همانطور که باید باشید)، می‌توانید به سادگی حاشیه سمت چپ آن‌ها را با یک مقدار منفی -1em به عقب برگردانید:
p + p img ( حاشیه سمت چپ: -1em؛ )
خیلی ساده، درست است؟ اگر بخواهیم خط اول تمام پاراگراف ها را بلافاصله بعد از عنوان ها بدون تغییر همه پاراگراف های دیگر برجسته کنیم، چه می شود؟ باز هم می توانیم از کلاس view استفاده کنیم. یک انتخابگر ساده ساخته شده از یک ترکیب کننده ترکیبی مجاور و یک شبه عنصر این کار را انجام می دهد:
h1 + p:: first-line (نوع قلم: small-caps;)
توجه: شبه عنصر خط اول در CSS 2.1 به کار گرفته شد، CSS 3 از نماد:: برای تمایز بین شبه کلاس ها و شبه عناصر استفاده می کند.

ترکیب کننده ارثی
پروتکل معمول نشانه گذاری این است که بخش ها را در یک عنصر نامگذاری شده در یک #page یا #wrap قرار دهید:

شرح

عناصر صفحه وب زمانی همسایه نامیده می شوند که مستقیماً در کد سند از یکدیگر پیروی کنند.

نحو

E + F ( شرح قوانین سبک )

برای کنترل سبک عناصر همسایه از علامت مثبت (+) استفاده می شود که بین دو انتخابگر E و F قرار می گیرد.فضاهای اطراف پلاس اختیاری هستند. استایل در این نماد برای عنصر F اعمال می شود، اما تنها در صورتی که در مجاورت عنصر E باشد و بلافاصله از آن پیروی کند. بیایید به چند نمونه نگاه کنیم.

لورم اپیسوم دلبرآمت بنشین

برچسب بزنید فرزند تگ است

چون داخل این ظرف است. به ترتیب

به عنوان پدر و مادر عمل کنید .

لورم اپیسوم دلبر بنشینآمت

برچسب ها و همپوشانی ندارند و عناصر مجاور هستند. این واقعیت که آنها در داخل ظرف قرار دارند

بر نگرش آنها تأثیر نمی گذارد

لورم ipsumدولور سیت آمت، سازندهآدیپیسینگ نخبه.

همسایه اینجا برچسب ها هستند و ، و و . که در آن و عناصر مجاور به دلیل وجود یک ظرف بین آنها اعمال نمی شوند .

HTML5 CSS 2.1 IE Cr Op Sa Fx

انتخابگرهای مجاور

لورم ipsumدولور سیت آمت، سازندهنخبگان لاغری

لورم ایپسوم دولور سیت آمت، سازندهنخبگان لاغری



نتیجه این مثال در شکل نشان داده شده است. 1.

برنج. 1. رنگ متن قرمز برای انتخابگرهای مجاور

مرورگرها

اگر یک نظر (B + /* به اضافه */ I) بین انتخابگرها وجود داشته باشد، اینترنت اکسپلورر 7 استایلی را اعمال نمی کند.

چندی پیش، نسخه جدید و هشتمین مرورگر اینترنت اکسپلورر منتشر شد و همه مدیران وب‌سایت‌ها نفس راحتی کشیدند. از این گذشته ، سرانجام ، مرورگر مایکروسافت ، اگرچه با تاخیر بسیار زیاد ، کم و بیش مشخصات HTML و CSS را رعایت کرده و صفحات وب را به اندازه کافی نمایش می دهد. در کل همه از نسخه هفتم این انتظار را داشتند. با این حال، در نگاه اول، به جز پشتیبانی از استفاده از تب ها، چیز جدیدی به همراه نداشت. اما این فقط در نگاه اول است... تعداد کمی از مردم در مورد یک نوآوری بسیار مهم دیگر در IE7 می دانند: در این نسخه بود که مرورگر برای اولین بار شروع به پشتیبانی از انواع جدیدی از انتخابگرهای CSS کرد.

انتخابگر بخشی از یک قانون CSS است که مشخص می کند روی کدام عناصر اعمال شود. انواع اصلی آنها تقریبا برای همه وب مسترها شناخته شده است. اما افراد زیادی در مورد چنین "غیربیان" مانند انتخابگرهای همسایه و کودک و همچنین انتخابگرهای ویژگی نشنیده اند. دلیلش این است که استفاده طولانی مدت از آنها فایده ای نداشت، زیرا یکی از محبوب ترین مرورگرها، اینترنت اکسپلورر، از آنها پشتیبانی نمی کرد. با این حال، اکنون شرایط تغییر کرده است و کنار گذاشتن فرصت های جدیدی که باز شده است، چندان منطقی نخواهد بود. به همین دلیل تصمیم گرفتم این نقد کوتاه را بنویسم.

انتخابگرهای مجاور

مشخص می کند که یک قانون CSS تنها زمانی برای یک عنصر اعمال می شود که در مجاورت یک عنصر دیگر باشد. مثال:

عناصر همسایه نامیده می شوندهنگامی که در کد صفحه آنها ، و بین آنها هیچ عنصر دیگری وجود ندارد

در اینجا تگ های مجاور هستند و ، و و . برچسب ها و همسایه نیستند، زیرا یک عنصر خارجی بین آنها "گوه" شده است .

نحو نوشتن یک انتخابگر مجاور به شرح زیر است:

عنصر I + عنصر II (...)

بیایید چنین قاعده ای را برای مثال خود در نظر بگیریم:

قوی + em (رنگ: قرمز؛ )
قوی + ins (رنگ: آبی؛ )

در اینجا نتیجه به نظر می رسد:

همانطور که می بینید، سبک فقط برای برچسب تغییر کرده است ، و برچسب تحت تأثیر قرار نگرفت. این قانون مجاورت را به خوبی نشان می دهد.

بیایید آزمایش دیگری انجام دهیم - در مثال ما جایگزین کنید بر :

عناصر همسایه نامیده می شوندهنگامی که در کد صفحه آنها در کنار یکدیگر قرار گرفته اند، و بین آنها هیچ عنصر دیگری وجود ندارد

همانطور که ممکن است حدس بزنید، سبک تگ دوم است تغییر نخواهد کرد:

این به این دلیل است که دیگر برای آن همسایه نخواهد بود .

انتخابگرهای کودک

مشخص می کند که قانون CSS فقط زمانی برای یک عنصر اعمال می شود که فرزند عنصر دیگری باشد. مثال:

به یک عنصر گفته می شود که فرزند عنصری است که در آن تودرتو است است مستقیمنسلاین عنصر

اینجا بچه ها تگ هستند در رابطه با برچسب

و به سمت . برچسب بزنید در رابطه با برچسب

کودک نیست زیرا والد مستقیم آن نیست.

نحو نوشتن به صورت زیر است:

عنصر I > عنصر II (…)

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

p >
p > em (رنگ: آبی؛ ) /* انتخابگر کودک */

نتیجه زیر را خواهیم گرفت:

در مورد ما، برچسب بچه نیست

زیرا در سطح دوم لانه سازی در آن قرار دارد. طبیعتاً سبکی که باید متن را آبی کند برای او «کارساز» نبود.

حالا بیایید انتخابگر فرزند را با انتخابگر زمینه جایگزین کنیم:

p > قوی ( رنگ: قرمز؛ ) /* انتخابگر کودک */
p em (رنگ: آبی؛ ) /* انتخابگر زمینه */

نتیجه قابل پیش بینی است:

بر خلاف انتخابگر فرزند، انتخابگر متنی در این مورد "کار می کند" زیرا به عمق سطح تودرتو اهمیتی نمی دهد.

انتخابگرهای صفت

مشخص می کند که قانون CSS فقط برای عناصری اعمال می شود که دارای ویژگی مشخص شده در انتخابگر هستند. مثال:

CSS یک فناوری بسیار مهم است که بدون آن امکان ایجاد حداقل یک وب سایت مناسب وجود ندارد.


مفاهیم اساسی CSS عبارتند از قوانین سبک، انتخابگرها، خصوصیات و مقادیر آنها.

در اینجا، تنها پاراگراف اول دارای یک پارامتر (یا ویژگی، که همان چیزی است) که از خود تعریف می‌کند، تراز است. بنابراین، قانون CSS برای انتخابگر ویژگی align برای اولین پاراگراف و فقط برای آن اعمال می شود.

نحو برای ورودی انتخابگر ویژگی عبارت است از:

[صفت] ( ... )

بیایید یک قانون برای مثال خود ایجاد کنیم (برای وضوح، علاوه بر ویژگی، خود برچسب را نیز نشان خواهیم داد که باید در نظر گرفته شود):

p (رنگ: سبز؛ وزن قلم: پررنگ؛ )

به راحتی می توان حدس زد که در پایان چه اتفاقی خواهد افتاد:

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

[ویژگی = "ارزش"] (...)

فقط برای عناصری اعمال می شود که مقدار مشخص شده برای این ویژگی را دارند.

[ویژگی^=”ارزش”] (…)

تقریباً یکسان است، فقط در این مورد، ویژگی فقط باید با مقدار مشخص شده شروع شود، و لزوماً آن را به طور کامل شامل نمی شود.

[خصیصه$="value"] (...)

به همین ترتیب، با این تفاوت که در اینجا مشخصه باید به مقدار مشخص شده ختم شود.

[ویژگی*=”ارزش”] (…)

این نماد نشان می دهد که مقدار می تواند در هر نقطه از ویژگی رخ دهد.

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


نویسنده مقاله: الکسی آنتونوف، خالق و مدیر وبلاگ در مورد فناوری های وب www.lounwolf.ru
=====================================================================

انتخابگر عنصر مجاور عنصر را بلافاصله بعد از عنصر مشخص شده دیگری در کد سند انتخاب می کند. بیایید یک قطعه کد html را به عنوان مثال در نظر بگیریم.

پاراگراف و در آن چربعنصر، و اینجا شیب دارعنصر

در اینجا سه ​​برچسب وجود دارد:

, و . برچسب ها و تو در یک ظرف

آنها فرزندان او هستند. اما در رابطه با یکدیگر همسایه هستند.

نحو برای یک انتخابگر مجاور، انتخابگر عنصر قبلی است، به دنبال آن علامت "+" و پس از آن انتخابگر عنصر انتخاب شده است. بیایید با انتخابگر همسایه کار کنیم:

انتخابگر همسایه در CSS.

پاراگراف و در آن چربعنصر، و اینجا شیب دارعنصر

اینجا چربو خط کشی کردعناصر، بیشتر شیب دار.



در مثال، می بینید که انتخابگر عنصر همسایه در پاراگراف اول فعال شده است. اینجا تگ می کند و همدیگر را دنبال کنند و در پاراگراف دوم بین آنها از تگ استفاده شده است ، اکنون دو جفت تگ مجاور دیگر وجود دارد: + و + .

در این صورت تگ خطا در نظر گرفته می شود. در مجاورت تگ

اینجا تگ کنید فرزند تگ است

و او نیز به نوبه خود یک پدر و مادر است .

مثال زیر کار نخواهد کرد:

انتخابگر همسایه در CSS.

پاراگراف و در آن چربعنصر، و اینجا شیب دارعنصر

اینجا چربو خط کشی کردعناصر، بیشتر شیب دار.



مثال واقعی تر

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

، مطلوب است که حاشیه بالایی (مشخصات margin-top) افزایش یابد. تورفتگی 30 پیکسلی متن را خواناتر می کند. اما در مورد برچسب

بلافاصله بعد از آن می آید

و ممکن است در ابتدای مقاله، تورفتگی بالای برچسب باشد

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

در اینجا کد html با مثالی از نحوه عملکرد انتخابگر همسایه آورده شده است.

انتخابگر همسایه در CSS

سلام!

عنوان h2

عنوان h2

متن پاراگراف در مورد ماجراهای باورنکردنی.

عنوان h2

متن پاراگراف در مورد ماجراهای باورنکردنی.

عنوان h2

متن پاراگراف در مورد ماجراهای باورنکردنی.



همچنین، با استفاده از ابزار انتخاب مجاور، تنظیم تورفتگی بین عنوان و پاراگراف اول بخش راحت است، در مثال ما، اینها برچسب ها هستند.

و

همچنین شایان ذکر است که استفاده از مقادیر منفی برای کاهش تورفتگی راحت است.

انتخابگر همسایه در CSS

سلام!

عنوان h2

متن پاراگراف در مورد ماجراهای باورنکردنی.

عنوان h2

متن پاراگراف در مورد ماجراهای باورنکردنی.

عنوان h2

متن پاراگراف در مورد ماجراهای باورنکردنی.

عنوان h2

متن پاراگراف در مورد ماجراهای باورنکردنی.



اکنون مثالی از نحوه استفاده از انتخابگر مجاور برای انتخاب تمام عناصر لیست، به جز عنصر اول.

انتخابگر همسایه در CSS

  • مورد فهرست شماره 1.
  • لیست مورد شماره 2.
  • لیست مورد شماره 3.
  • مورد فهرست شماره 4.


در اینجا خروجی این مثال است:

شکل 1. مثال کار شماره 5.

عصر بخیر همکاران عزیز، امروز دو مورد دیگر را با شما مطالعه خواهیم کرد انتخابگر، که نامیده می شوند انتخابگرهای css فرزند و همسایه. تا حد زیادی می توانید بدون آنها کار کنید، اما برای پیشرفت شما باید آنها را یاد بگیرید و گاهی اوقات به کار ببرید تا در حافظه شما باقی بماند. پس بیایید در مورد چه چیزی بحث کنیم انتخابگرهامجاور هستند و کدام کودکان هستند و با یک مثال آن را تحلیل می کنیم.
انتخابگرهای فرزند css- عناصری که در داخل عنصر والد قرار دارند. نمونه ای از این ممکن است موارد زیر باشد. ما یک بلوک حاوی یک پاراگراف، یک بلوک دیگر و یک تصویر داریم. این سه عنصر فرزندان هستند. اگر بلوک فرزند حاوی عناصر دیگری نیز باشد، آنها دیگر فرزندان بلوک اول نیستند، بلکه فرزندان بلوکی هستند که مستقیماً در آن قرار دارند. امیدوارم به اصل مطلب رسیده باشید.
انتخابگرهای CSS مجاور- عناصری که یکی پس از دیگری در کد سند قرار دارند. نمونه اش این است. ما یک پاراگراف داریم که با یک برچسب دنبال می شود طول. همه چیز کاملاً واضح است، اما ما فقط باید همه آن را با مثال های واقعی تجزیه و تحلیل کنیم.








متن در یک پاراگراف


متن در فاصله

دیگر متن فرزند در پاراگراف وجود ندارد








با کمک استایل ها همین نتیجه را برای تگ اضافه می کنیم طول

بخش > دهانه(
اندازه فونت: 200%
}

پ + دهانه (
رنگ: قرمز
}

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