انتخابگرهای پیشرفته CSS – نحوه و زمان استفاده از آنها
نوشتن CSS اغلب برای بسیاری از توسعه دهندگان دردناک است، زیرا بسیاری از ما کنجکاوی خود را خیلی زود در مسیر یادگیری از دست می دهیم. به عنوان مثال، به محض اینکه انتخابگرهای اصلی CSS را یاد می‌گیریم، الگوی استفاده از آنها را حل می‌کنیم و فکر می‌کنیم که آنها تمام چیزی هستند که نیاز داریم. اما اگر بیشتر باشد چه؟
در این مقاله، با ساختن بخش پرسش‌های متداول تعاملی، با برخی از انتخاب‌کننده‌ها و ترکیب‌کننده‌های پیشرفته CSS مانند child and sibling combinators ، pseudo-classes ، structural pseudo-classes ، pseudo-elements و attribute selectors آشنا خواهید شد. اگر می‌خواهید برای دیدن آنچه می‌سازیم جلو بروید، آن را تحلیل کنید .
فهرست مطالب:
چرا باید از انتخابگرهای پیشرفته CSS استفاده کنید؟
چگونه یک بخش پرسش و پاسخ تعاملی بسازیم
انتخابگرهای پیشرفته CSS چیست؟
در هسته خود، CSS در مورد انتخاب عناصر از DOM (مدل شیء سند) برای اعمال سبک ها به آنها است.
در حالی که انتخابگرهای پایه مانند انتخابگرهای کلاس، شناسه و عناصر بیشتر کارهای روزمره را انجام می دهند، انتخابگرهای پیشرفته CSS سطح عمیق تری از ویژگی و کنترل را ارائه می دهند. آنها شما را قادر می سازند تا دقیقاً عناصری را که می خواهید سبک کنید، بر اساس ویژگی ها، حالت ها و روابط آنها با یکدیگر هدف قرار دهید.
به عنوان مثال، می‌توانید پیوندهایی را که بازدید شده‌اند ( :visited ) بپوشانید، به پاراگراف اول یک مقاله استایل دهید ( article p:first-of-type )، یا عناصر خالی ( :empty ) را هدف قرار دهید، که همه اینها شما را از شر آن نجات می‌دهد. پر کردن کد HTML خود با کلاس ها یا شناسه های اضافی که در نهایت منجر به کد تمیزتر و کارآمدتر می شود.
چرا باید از انتخابگرهای پیشرفته CSS استفاده کنید؟
در اینجا سه دلیل از بسیاری از دلایل برای در نظر گرفتن فرصت دادن به انتخابگرهای پیشرفته CSS وجود دارد:
سبک تعاملی : با شبه کلاس‌هایی مانند :hover و :focus ، می‌توانید عناصر تعاملی ایجاد کنید که مستقیماً در CSS به اقدامات کاربر پاسخ می‌دهند. این یک برد-برد است، زیرا نیاز به جاوا اسکریپت برای جلوه های بصری را به حداقل می رساند و پس اسکریپت های شما را نازک نگه می دارد و همچنان تجربه و تعامل کاربر را افزایش می دهد.
دسترسی و سئو : استفاده از انتخابگرهای پیشرفته می تواند به معنایی ماندن HTML کمک کند، زیرا سبک ها بر اساس ساختار طبیعی سند شما و ویژگی های عناصر اعمال می شوند. این کار خواندن و نگهداری کد شما را آسان‌تر می‌کند اما از همه مهمتر دسترسی و سئو را بهبود می‌بخشد.
ارتباط آینده : با تکامل استانداردهای وب، CSS نیز رشد می کند. این بدان معناست که امروزه با استفاده از انتخابگرهای پیشرفته، شیوه نامه های خود را با آینده توسعه وب هماهنگ می کنید. این تضمین می کند که طرح های شما بدون توجه به تغییراتی که در وب ایجاد می شود انعطاف پذیر و سازگار باقی می مانند.
چگونه یک بخش پرسش و پاسخ تعاملی بسازیم
برای یادگیری انتخابگرهای پیشرفته CSS، یک بخش پرسش‌های متداول تعاملی ایجاد می‌کنیم تا در صورت کلیک کردن، پاسخ‌های سؤالات را نشان دهیم. ما همچنین سبک های مختلفی را برای سؤالات متداول بر اساس وضعیت یا محتوای آنها پیاده سازی خواهیم کرد.
این رویکرد عملی درک شما را تقویت می کند زیرا کاربرد آنها را در سناریوهای دنیای واقعی مشاهده می کنید.
آن را در CodePen اینجا تحلیل کنید.
پیش نیازها
دانش اولیه HTML و CSS
یک IDE
یک مرورگر وب
کد HTML
ساختار HTML برای پروژه ما شامل یک سری موارد متداول است که هر کدام در یک div قرار دارند و دارای یک سوال قابل کلیک ( label یا button ) هستند که نمایان بودن پاسخ ( div ) را کنترل می کند. هر مورد سؤالات متداول دارای یک ورودی چک باکس برای مدیریت وضعیت باز/بستن خود است، با استفاده از CSS برای تغییر بصری نمایان بودن پاسخ بدون جاوا اسکریپت.
<body> <section class="faq-section"> <div class="container"> <div class="faq-heading"> <h1>Frequently Asked Questions</h1> <p>Here are a few general CSS questions and their answers, hope they serve as a refresher.</p> </div> <div class="faq-container"> <!-- FAQ Item 1 --> <div class="faq-item"> <input type="checkbox" id="faq1" class="faq-toggle" hidden> <label for="faq1" class="faq-question">What's the difference between px, em, and rem?</label> <div class="faq-answer"> <p>px is a fixed size, em changes size based on the parent element's font size, and rem is always relative to the document's root font size, making layouts more flexible.</p> </div> </div> <!-- FAQ Item 2 --> <div class="faq-item"> <input type="checkbox" id="faq2" class="faq-toggle" hidden> <label for="faq2" class="faq-question">Why use :hover and :focus pseudo-classes?</label> <div class="faq-answer"> <p>They let you style elements when users interact with them, like changing a button's color when hovered over, making websites more interactive.</p> </div> </div> </div> </div> </section> </body>شروع کد پایه CSS
کد زیر یک سبک اولیه را برای کد HTML ما اعمال می کند. این ارائه شده است تا بتوانید بر یادگیری نحوه عملکرد انتخابگرهای پیشرفته CSS تمرکز کنید.
body { background-color: #00ad8f; } .faq-section { margin-top: 5em; } .faq-section h1 { font-size: 2.5em; } .faq-heading { text-align: center; margin-bottom: 2em; color: #fff; } .container { max-width: 800px; margin: auto; padding: 1em; } .faq-item { background-color: #fff; border-radius: 0.3em; border: 1px solid #333; margin-bottom: 0.5em; } .faq-toggle { display: none; /* Hide checkbox */ } .faq-question { background-color: #efefef; padding: 1em; margin: 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: none; position: relative; /* Necessary for positioning ::before content */ } .faq-answer { max-height: 0; overflow: hidden; border-top: 1px solid #333; transition: transform 0.3s ease, padding 0.3s ease; padding: 0 1em; }
از advCSS" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/beforeadvCSS.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/02/beforeadvCSS.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2024/02/beforeadvCSS.png 1600w, https://www.freecodecamp.org/news/content/images/size/w2400/2024/02/beforeadvCSS.png 2400w" sizes="(min-width: 1200px) 1200px" width="2000" height="881" loading="lazy"> ترکیب‌کننده‌های کودک و خواهر و برادر ( + ، ~ ، > ):
ترکیب‌کننده‌های کودک و خواهر و برادر، اگرچه به اندازه انتخابگرهای id و کلاس محبوب نیستند، اما برای طراحی عناصر در ارتباط با یکدیگر قدرتمند هستند.
ترکیب‌کننده فرزند ( > ) برای هدف‌گیری مستقیم فرزندان یک عنصر، مانند سبک‌دهی به آیتم‌های منو در نوار پیمایش، بدون تأثیر بر کرکره‌های تودرتو، ضروری است.
در همین حال، انتخابگر خواهر و برادر مجاور ( + ) فقط خواهر و برادری را هدف قرار می دهد که بلافاصله عنصری را برای کارهایی مانند برجسته کردن اولین پاراگراف بعد از عنوان دنبال می کند.
و انتخابگر خواهر و برادر عمومی ( ~ ) هر خواهر و برادری را که از یک عنصر پیروی می کند، هدف قرار می دهد، مانند برجسته کردن موارد فهرست پس از یک چک باکس علامت زده.
در پروژه ما، همانطور که در کد زیر مشاهده می شود، وقتی روی یک سوال کلیک می شود (یعنی چک باکس مربوط به آن علامت زده می شود)، انتخابگر خواهر و برادر مجاور ( + ) یک نماد "-" را برای نشان دادن وضعیت باز نشان می دهد، به این معنی که یک پرسش متداول است. باز شد. همچنین، حداکثر ارتفاع پاسخ را کنترل می کند تا به راحتی آن را نشان دهد.
.faq-toggle:checked + .faq-question::after { content: '-'; /* Changes the plus to a minus on the FAQ question when the toggle is checked */ } .faq-toggle:checked + .faq-question + .faq-answer { max-height: 1000px; /* Reveals the answer when the toggle is checked */ } 
کلاس های شبه ( :nth-child() , :nth-of-type() , :not() , :focus , :hover ):
کلاس‌های کاذب اجازه می‌دهند تا عناصر را بر اساس حالت یا آپشن های شان بدون تغییر ساختار HTML، یک ظاهر طراحی کنند.
آنها برای عناصر تعاملی عالی هستند، مانند تغییر رنگ پس‌زمینه دکمه‌ها در شناور با استفاده از :hover و :nth-of-type() برای برجسته کردن هر سومین تصویر در یک گالری برای جلوه‌ای طرح‌دار. یا برای بهبود خوانایی با :nth-child() و :not() به هر سطر دیگر در جدول استایل دهید. استایل ها را برای همه دکمه ها به جز دکمه های غیرفعال اعمال کنید.
در پروژه خود، همانطور که در کد زیر مشاهده می‌شود، از کلاس شبه :nth-of-type() برای تمایز بین سؤالات زوج و فرد با اختصاص رنگ‌های پس‌زمینه مختلف به آنها استفاده می‌کنیم و برای بهبود تعامل و ایجاد بخش سؤالات متداول از :hover استفاده می‌کنیم. حرکت بصری راحت تر
.faq-item:nth-of-type(odd) .faq-question{ background-color: #fff; /* For odd items */ } .faq-item:nth-of-type(even) .faq-question{ background-color: #caffee; /* For even items */ } .faq-item:nth-of-type(odd) .faq-question:hover { background-color: #dfdfdf; } .faq-item:nth-of-type(even) .faq-question:hover { background-color: #9debd2; } 
شبه کلاس های ساختاری ( :first-child , :last-child , :empty , :only-child ):
شبه کلاس های ساختاری زمانی که به عناصر یک ظاهر طراحی می شود بر اساس موقعیت آنها در ظرف اصلی خود می درخشند. به همین دلیل است که آنها به کارهایی مانند برجسته کردن اولین یا آخرین مورد در فهرست با :first-child برای جلب توجه یا :last-child برای اضافه کردن یک حاشیه ویژه برای تأکید کمک می کنند.
آنها همچنین در سناریوهایی که ساختار سند بر سبک تأثیر می‌گذارد، مانند استفاده از :empty برای مخفی کردن یا سبک متفاوتی از divهای خالی برای سازگاری طرح‌بندی، یا :only-child برای متمرکز کردن محتوا در یک div برای ظاهری تمیز، برتر هستند.
.faq-item:first-of-type .faq-question { border-top: 2px solid #007BFF; } .faq-item:last-of-type .faq-question { border-bottom: 2px solid #007BFF; } در پروژه ما و در کد بالا، انتخابگرهای :first-of-type و :last-of-type برای تشخیص بصری اولین و آخرین موارد متداول با گفت ن یک حاشیه بالا و پایین به ترتیب استفاده می شوند.
شبه عناصر ( ::before ، ::after ، :`:اول حرف`، ::first-line ):
عناصر شبه توانایی ایجاد عناصر مجازی را دارند که می توانند به طور جداگانه استایل شوند. آنها به ما این امکان را می دهند که به بخش های خاصی از یک عنصر، مانند اضافه کردن محتوا قبل یا بعد از محتوای یک عنصر، یا استایل دادن به اولین حرف یا خط متن، استایل دهیم.
همچنین می توانید از ::before و ::after برای اضافه کردن نقل قول های تزئینی در اطراف نقل قول های بلوک بدون تغییر HTML یا ::first-letter برای بزرگ کردن حرف اول هر مقاله مشابه آنچه در مجلات انجام می شود استفاده کنید. در نهایت، ::first-line رنگ خط اول یک پاراگراف را تغییر می دهد تا توجه را جلب کند.
/* ::after used to display "+" symbol */ .faq-question::after { content: '+'; color: #00ad8f; font-size: 1.4em; } در پروژه ما و در کد بالا، شبه عنصر ::after یک علامت "+" به هر سوال در حالت های پیش فرض خود اضافه می کند. این علامت "-" را که در بالا در سوالات باز اضافه کردیم تکمیل می کند. اینها با هم، نشانه های بصری را در مورد وضعیت مورد سؤالات متداول به کاربر ارائه می دهند.
انتخابگرهای ویژگی ( [attr^="value"] , [attr$="value"] , [attr*="value"] ):
انتخابگرهای ویژگی راهی برای استایل دادن به عناصر بر اساس وجود، نبود یا ارزش ویژگی ها ارائه می دهند. آنها برای استایل دادن به عناصر با ویژگی های داده خاص، مانند متمایز کردن پیوندهای خارجی با [attr^="value"] با هدف قرار دادن URL هایی که با "http" شروع می شوند یا استفاده از [attr$="value"] برای اعمال نمادها، راه حلی هستند. برای دانلود لینک ها
همه اینها بر نقش انتخابگرهای ویژگی در ایجاد سبک‌های دقیق و مبتنی بر شرایط تأکید می‌کنند و سطح بالایی از ویژگی و انعطاف‌پذیری را ارائه می‌دهند.
.faq-item[data-category^="important"] .faq-question { color: #E91E63; } در پروژه خود و در کد بالا، از یک انتخابگر ویژگی [attr^="value"] برای اعمال یک سبک متمایز (قرمز) به سوالاتی که با یک data-category به عنوان مهم علامت گذاری شده اند استفاده می کنیم. این باعث می شود آنها در بخش پرسش و پاسخ متمایز شوند.
کد کامل پروژه
در اینجا کد HTML آمده است:
<body> <section class="faq-section"> <div class="container"> <div class="faq-heading"> <h1>Frequently Asked Questions</h1> <p>Here are a few general CSS questions and their answers, hope they serve as a refresher.</p> </div> <div class="faq-container"> <!-- FAQ Item 1 --> <div class="faq-item"> <input type="checkbox" id="faq1" class="faq-toggle" hidden> <label for="faq1" class="faq-question">What's the difference between px, em, and rem?</label> <div class="faq-answer"> <p>px is a fixed size, em changes size based on the parent element's font size, and rem is always relative to the document's root font size, making layouts more flexible.</p> </div> </div> <!-- FAQ Item 2 --> <div class="faq-item"> <input type="checkbox" id="faq2" class="faq-toggle" hidden> <label for="faq2" class="faq-question">Why use :hover and :focus pseudo-classes?</label> <div class="faq-answer"> <p>They let you style elements when users interact with them, like changing a button's color when hovered over, making websites more interactive.</p> </div> </div> <!-- FAQ Item 3 --> <div class="faq-item" data-category="important"> <input type="checkbox" id="faq3" class="faq-toggle" hidden> <label for="faq3" class="faq-question">What is the CSS Box Model?</label> <div class="faq-answer"> <p>It's a concept that includes margins, borders, padding, and the actual content area, helping you control spacing and layout around elements.</p> </div> </div> <!-- FAQ Item 4 --> <div class="faq-item"> <input type="checkbox" id="faq4" class="faq-toggle" hidden> <label for="faq4" class="faq-question">How does z-index work?</label> <div class="faq-answer"> <p>z-index decides which elements appear on top of others on the page. Higher values are closer to the front, useful for overlays or dropdown menus.</p> </div> </div> <!-- FAQ Item 5 --> <div class="faq-item"> <input type="checkbox" id="faq5" class="faq-toggle" hidden> <label for="faq5" class="faq-question">Why use CSS variables?</label> <div class="faq-answer"> <p>They make it easy to update values like colors or fonts across your site by changing them in one place, keeping your styles consistent and easier to manage.</p> </div> </div> </div> </div> </section> </body>این کد CSS است:
body { background-color: #00ad8f; } .faq-section { margin-top: 5em; } .faq-section h1 { font-size: 2.5em; } .faq-heading { text-align: center; margin-bottom: 2em; color: #fff; } .container { max-width: 800px; margin: auto; padding: 1em; } .faq-item { background-color: #fff; border-radius: 0.3em; border: 1px solid #333; margin-bottom: 0.5em; } .faq-toggle { display: none; /* Hide checkbox */ } .faq-question { background-color: #efefef; padding: 1em; margin: 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: none; position: relative; /* Necessary for positioning ::before content */ } .faq-answer { max-height: 0; overflow: hidden; border-top: 1px solid #333; transition: transform 0.3s ease, padding 0.3s ease; padding: 0 1em; } .faq-toggle:checked + .faq-question::after { content: '-'; /* Changes the plus to a minus on the FAQ question when the toggle is checked */ } .faq-toggle:checked + .faq-question + .faq-answer { max-height: 1000px; /* Reveals the answer when the toggle is checked */ } /* nth-of-type for styling odd and even .faq-question differently */ .faq-item:nth-of-type(odd) .faq-question{ background-color: #fff; /* For odd items */ } .faq-item:nth-of-type(even) .faq-question{ background-color: #caffee; /* For even items */ } .faq-item:nth-of-type(odd) .faq-question:hover { background-color: #dfdfdf; /* Lightens the question's background on hover for visual feedback */ } .faq-item:nth-of-type(even) .faq-question:hover { background-color: #9debd2; /* Lightens the question's background on hover for visual feedback */ } /* First-of-type and last-of-type to style the first and last item uniquely */ .faq-item:first-of-type .faq-question { border-top: 2px solid #007BFF; } .faq-item:last-of-type .faq-question { border-bottom: 2px solid #007BFF; } /* ::after used to display "+" symbol */ .faq-question::after { content: '+'; color: #00ad8f; font-size: 1.4em; } .faq-item[data-category^="important"] .faq-question { color: #E91E63; /* Styles important questions differently */ }نتیجه
ما به تازگی با ساختن بخش پرسش و پاسخ تعاملی، به دنیای انتخابگرهای پیشرفته CSS وارد شده‌ایم. این انتخابگرهای پیشرفته به شما این امکان را می دهند که کد کمتری بنویسید در حالی که کارهای بیشتری انجام می دهید، HTML خود را تمیز نگه دارید و سبک های خود را واضح نگه دارید.
در پایان، امیدوارم دفعه بعد که با تصمیمی در مورد نحوه طراحی یک چیدمان پیچیده یا عنصر تعاملی مواجه شدید، قدرت و انعطاف پذیری این انتخابگرهای پیشرفته CSS را به یاد بیاورید و آنها را امتحان کنید.
Google Web Dev در انتخابگرهای CSS
برچسب‌ها
|
ارسال نظر