آموزش CSS مبتدی : شبه کلاسها و شبه عناصر
مجموعه بعدی انتخابگرهایی که بررسی خواهیم کرد، شبه کلاسها و شبه عناصر نامیده میشوند. تعداد زیادی از این انتخابگرها وجود دارند و اغلب اهداف کاملاً خاصی را دنبال میکنند. هنگامی که نحوه استفاده از آنها را بدانید، میتوانید انواع مختلف را بررسی کنید تا ببینید آیا چیزی وجود دارد که برای کاری که میخواهید انجام دهید، مناسب باشد یا خیر.
یک شبه کلاس، انتخابگری است که عناصری را که در حالت خاصی هستند انتخاب میکند، مثلاً اولین عنصر از نوع خود هستند، یا نشانگر ماوس روی آنها قرار گرفته است. آنها معمولاً طوری عمل میکنند که انگار شما یک کلاس را به بخشی از سند خود اعمال کردهاید، و اغلب به شما کمک میکنند کلاسهای اضافی را در نشانهگذاری خود کاهش دهید و کد انعطافپذیرتر و قابل نگهداریتری به شما میدهند.
شبه کلاسها کلمات کلیدی هستند که با علامت دونقطه شروع میشوند. به عنوان مثال، یک شبه کلاس است.
با این حال، نگهداری این میتواند آزاردهنده باشد - اگر یک پاراگراف جدید به بالای سند اضافه شود چه؟ باید کلاس را به پاراگراف جدید منتقل کنیم. به جای اضافه کردن کلاس، میتوانیم از انتخابگر کلاس کاذب استفاده کنیم - این همیشه اولین عنصر فرزند یک عنصر (در این مورد ) را هدف قرار میدهد و دیگر نیازی به ویرایش HTML نخواهیم داشت (به هر حال، این ممکن است همیشه امکانپذیر نباشد، شاید به این دلیل که توسط یک CMS تولید میشود).
همه شبه کلاسها اینگونه رفتار میکنند. آنها بخشی از سند شما را که در وضعیت خاصی قرار دارد، هدف قرار میدهند و طوری رفتار میکنند که انگار یک کلاس به HTML خود اضافه کردهاید.
نوشتن شبه کلاسها و عناصر بدون هیچ انتخابگر عنصری قبل از آنها معتبر است. در مثال بالا، میتوانید بنویسید و این قانون برای هر عنصری که فرزند اول یک عنصر باشد، اعمال میشود، نه فقط فرزند اول یک پاراگراف - معادل است. با این حال، معمولاً شما کنترل بیشتری میخواهید، بنابراین باید دقیقتر باشید.
برخی از شبه کلاسها فقط زمانی اعمال میشوند که کاربر به نحوی با سند تعامل داشته باشد. این شبه کلاسهای اقدام کاربر، که گاهی اوقات به عنوان شبه کلاسهای پویا نیز شناخته میشوند، طوری عمل میکنند که انگار یک کلاس هنگام تعامل کاربر با عنصر به آن اضافه شده است. مثالها عبارتند از:
- که در بالا ذکر شد؛ این فقط در صورتی اعمال میشود که کاربر اشارهگر خود را روی یک عنصر، معمولاً یک لینک، حرکت دهد.
- فقط در صورتی اعمال میشود که کاربر با کلیک کردن یا استفاده از کنترلهای صفحه کلید، عنصر را فوکوس کند.
شبهعناصر نیز به همین شکل رفتار میکنند. با این حال، آنها طوری عمل میکنند که انگار یک عنصر HTML کاملاً جدید به نشانهگذاری اضافه کردهاید، نه اینکه یک کلاس را به عناصر موجود اعمال کنید.
شبهعناصر با دو علامت دونقطه شروع میشوند. نمونهای از یک شبهعنصر است.
برخی از شبهعنصرهای اولیه از سینتکس تک دونقطه استفاده میکردند، بنابراین ممکن است گاهی اوقات این را در کد یا مثالها مشاهده کنید. مرورگرهای مدرن برای سازگاری با نسخههای قبلی، از شبهعنصرهای اولیه با سینتکس تک یا دو دونقطه پشتیبانی میکنند.
برای مثال، اگر میخواستید خط اول یک پاراگراف را انتخاب کنید، میتوانستید آن را در یک عنصر قرار دهید و از یک انتخابگر عنصر استفاده کنید؛ با این حال، اگر تعداد کلماتی که انتخاب کردهاید، بلندتر یا کوتاهتر از عرض عنصر والد باشد، این کار ناموفق خواهد بود. از آنجایی که ما معمولاً نمیدانیم چند کلمه در یک خط قرار میگیرد - زیرا این تعداد با تغییر عرض صفحه یا اندازه فونت تغییر میکند - انجام این کار با افزودن HTML به طور قطعی غیرممکن است.
انتخابگر شبه عنصر این کار را به طور قابل اعتمادی برای شما انجام میدهد - اگر تعداد کلمات افزایش یا کاهش یابد، همچنان فقط خط اول را انتخاب میکند.
این طوری عمل میکند که انگار یک به طور جادویی دور اولین خط قالببندی شده پیچیده شده و هر بار که طول خط تغییر میکند، بهروزرسانی میشود.
میتوانید ببینید که این، خط اول هر دو پاراگراف را انتخاب میکند.
ترکیب شبه کلاسها و شبه عناصر
اگر میخواهید خط اول پاراگراف اول را پررنگ کنید، میتوانید انتخابگرهای و را به هم متصل کنید.
مثال قبلی را طوری ویرایش کنید که از CSS زیر استفاده کند. ما میگوییم که میخواهیم خط اول از اولین عنصر را که درون یک عنصر است، انتخاب کنیم.
تولید محتوا با before و after
چند شبه عنصر خاص وجود دارد که به همراه ویژگی content برای درج محتوا در سند شما با استفاده از CSS استفاده میشوند. این تکنیک، محتوای تولید شده نامیده میشود.
شما میتوانید از آن برای درج یک رشته متن، مانند مثال زیر، استفاده کنید. ما همچنین به محتوای تولید شده یک رنگ پسزمینه زرد دادهایم تا به راحتی از محتوای پاراگراف قابل تشخیص باشد.
آیکونهای محتوای تولید شده
مثال بالا یک CSS معتبر است. با این حال، وارد کردن رشتههای متنی از CSS واقعاً کاری نیست که ما اغلب انجام میدهیم، زیرا آن متن برای برخی از صفحهخوانها غیرقابل دسترسی است و ممکن است پیدا کردن و ویرایش آن در آینده برای کسی دشوار باشد. یک استفاده معتبرتر از این شبهعناصر، وارد کردن یک آیکون است، به عنوان مثال فلش کوچکی که در مثال زیر اضافه شده است، که یک نشانگر بصری است که نمیخواهیم توسط صفحهخوان خوانده شود:
محتوای تولید شده اغلب برای درج یک رشته خالی نیز استفاده میشود که میتواند مانند هر عنصر دیگری در صفحه، استایلبندی شود.
در مثال بعدی، ما یک رشته خالی را با استفاده از شبه عنصر اضافه کردهایم. ما این را روی بلوک display: تنظیم کردهایم تا بتوانیم آن را با عرض و ارتفاع استایلبندی کنیم و یک شکل مربع ایجاد کنیم. سپس از CSS برای استایلبندی آن مانند هر عنصر دیگری استفاده میکنیم.
سعی کنید با CSS بالا بازی کنید تا ظاهر و رفتار شکل تولید شده را تغییر دهید.
شما مرتباً خواهید دید که محتوای تولید شده برای کارهای مختلف دیگری استفاده میشود. یک مثال عالی سایت CSS Arrow Please است که به شما کمک میکند تا با CSS یک فلش ایجاد کنید. هنگام ایجاد فلش، به CSS نگاه کنید و شبه عناصر و را در حال استفاده خواهید دید. هر زمان که این انتخابگرها را مشاهده کردید، به ویژگی content نگاه کنید تا ببینید چه چیزی به عنصر HTML اضافه میشود.
