input:checked در حالتی که به className مقید می شود کار نمی کند
سوال جدیدبا درود
حالت اول که CSS کار میکند
هنگامی که استایل input:checked در صفحه HTML تعریف و سپس تگ input در ادامه تعریف می گردد event مربوطه عمل میکند
حالت دوم که CSS کار نمیکند
هنگامی که تگ input بواسطه document.createElement تعریف و سپس className مربوطه قید می گردد event مربوطه عمل نمیکند
تصور من این است که pseudo-class ها استاتیک عمل میکنند یعنی تنها هنگامی عمل میکنند که قبل از تعریف تگ مقید به صفحه شده باشند
input:checked {
background-color: #2196F3;
}
<input type=”checkbox” >
اما زمانی که به شکل classname به تگ input که create شده معرفی و مقید میشوند کار نمیکنند
.myclass input:checked {
background-color: #2196F3;
}
var inp = document.createElement(‘input’);
inp.type = ‘checkbox’;
inp.className = ‘myclass’;
ممنون میشم مرا راهنمایی بفرمایید
با تشکر
با توجه به کدی که نوشتین و برداشتی که من از سوال شما داشتم، به نظر می رسه انتخاب سلکتور در css درست انجام نشده و مشکلی هم که عنوان کردید می تونه مربوط به همین سلکتور باشه نه عملکرد pseudo-class.
اگر دقت کنید درmyclass input:checked. عنصر input ی را هدف قرار داده که خود فرزند عنصری دیگر با کلاس myclass است، در حالیکه در کدی که نوشتین، کلاس myclass را به عنصر input اختصاص داده اید. اگر می خواهید input ی را انتخاب کنید که کلاس myclass دارد، بهتراست به این شکل نوشته شود input.myclass:checked یا myclass:checked.
این نمونه را می تونید بررسی کنید
اگر با اصلاح سلکتور مشکل رفع نشد لطفا در سایت jsbin یا codepen یک نمونه از مورد سوالتون بسازید و اینجا قرار دهید، تا بهتر بشه بررسی و راهنمایی کرد.
